html{color-scheme:light;}
:root{
  --bg-primary:#FFF9E8;
  --bg-secondary:#FFF5DF;
  --card-cream:#FFFDF8;
  --coral:#FF725F;
  --coral-2:#FF9278;
  --coral-dark:#EC6758;
  --text-main:#261818;
  --text-secondary:#75615C;
  --text-muted:#9D8781;
  --text-brown:#5A302B;
  --border-soft:#F0DFCF;
  --card-border:rgba(72,42,33,0.07);
  --pending-bg:#FFF0C7;
  --pending-text:#9A6810;
  --paid-bg:#DFF8DF;
  --paid-text:#247C32;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Nunito Sans','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background: linear-gradient(150deg,#f3ecdf 0%, #ecdcc4 100%);
  color:var(--text-main);
  min-height:100vh;
}

/* App shell: full width on mobile, centered card on wider screens */
#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg-primary);
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow: 0 0 60px rgba(90,48,30,0.12);
}
@media(min-width:481px){
  body{ padding:16px; display:flex; align-items:flex-start; justify-content:center; min-height:100vh; }
  #app{
    width:100%; max-width:920px;
    margin:0 auto;
    min-height:calc(min(100vh - 32px, 860px));
    height:auto;
    border-radius:28px;
    overflow:visible;
    box-shadow:0 15px 50px rgba(90,48,30,0.18);
  }
  .topbar { border-radius: 28px 28px 0 0; }
  .bottom-nav { border-radius: 0 0 28px 28px; }
}

@media(min-width:600px){
  .content{ padding:16px 28px 32px 28px; gap:20px; }
  .hero-card-banner{ min-height:230px; border-radius:24px; }
  .hero-card-banner h2{ font-size:30px !important; }
  .hero-card-banner p{ font-size:16px !important; }
  .secondary-row{ grid-template-columns:1fr 1fr; gap:18px; }
  .sec-card{ padding:20px; }
  .sec-card h3{ font-size:17px; }
  .sec-card p{ font-size:13.5px; }
  .input-pill{ padding:16px 20px; font-size:15px; }
  .khata-strip{ padding:18px 20px; }
  .vasooli-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
}

/* Top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 6px 20px;
  flex-shrink:0;
  position:sticky; top:0; z-index:20;
  background:var(--bg-primary);
}
.icon-btn{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--text-main); background:transparent; border:none; cursor:pointer; border-radius:12px;
}
.icon-btn:active{ background:rgba(72,42,33,0.06); }
.logo-wrap{ display:flex; align-items:center; gap:6px; }
.logo-text{ font-family:'Manrope',sans-serif; font-weight:900; font-size:20px; letter-spacing:-0.2px; }
.logo-emoji{ font-size:18px; }
.pro-btn{
  display:flex; align-items:center; gap:5px;
  background:var(--card-cream); border:1px solid var(--border-soft);
  padding:8px 14px; border-radius:16px; font-weight:800; font-size:13px; color:#B8790C;
  box-shadow:0 4px 10px rgba(65,35,25,0.06); cursor:pointer;
}
.pro-btn:active{ transform:scale(0.96); }

/* Content */
.content{
  flex:1;
  padding:8px 20px 90px 20px;
  display:flex; flex-direction:column; gap:16px;
  overflow-y:auto;
}
.content.in-chat-window {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hero greeting */
.hero-greeting{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px 2px 2px; gap:12px; }
.hero-greeting h1{ margin:0; font-family:'Manrope',sans-serif; font-weight:800; font-size:23px; line-height:1.28; }
.mascot-img{ width:72px; height:auto; flex-shrink:0; filter:drop-shadow(0 10px 14px rgba(230,150,20,0.35)); animation:floaty 3.2s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-6px) rotate(2deg);} }

/* Hero CTA card */
.hero-card{
  position:relative; background:linear-gradient(135deg,var(--coral) 0%, var(--coral-2) 100%);
  border-radius:22px; padding:22px 22px 24px 22px; box-shadow:0 15px 25px rgba(232,89,75,0.28);
  overflow:hidden; cursor:pointer; border:none; text-align:left; width:100%; font-family:inherit;
  transition:transform .15s ease;
}
.hero-card:active{ transform:scale(0.98); }
.hero-card::after{ content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; background:rgba(255,255,255,0.12); border-radius:50%; }
.hero-card h2{ margin:0 0 6px 0; font-family:'Manrope',sans-serif; font-weight:900; font-size:24px; color:#fff; position:relative; z-index:1; }
.hero-card p{ margin:0; font-weight:600; font-size:14.5px; color:rgba(255,255,255,0.95); position:relative; z-index:1; }

/* Home mini stats */
.mini-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini-stats > div{ background:var(--bg-secondary); border:1px solid var(--border-soft); border-radius:16px; padding:12px 14px; box-shadow:0 6px 14px rgba(65,35,25,0.05); }
.mini-stats b{ display:block; font-family:'Manrope',sans-serif; font-size:18px; font-weight:900; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-stats span{ display:block; margin-top:2px; font-size:11.5px; font-weight:800; color:var(--text-muted); }

/* Secondary cards */
.secondary-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sec-card{
  background:var(--card-cream); border:1px solid var(--card-border); border-radius:18px;
  padding:16px 14px; box-shadow:0 8px 18px rgba(65,35,25,0.10); cursor:pointer;
  transition:transform .15s ease; text-align:left; font-family:inherit;
}
.sec-card:active{ transform:scale(0.97); }
.sec-card h3{ margin:0 0 6px 0; font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; line-height:1.3; }
.sec-card p{ margin:0; font-size:12.5px; font-weight:500; color:var(--text-secondary); line-height:1.35; }

/* Input pill */
.input-pill{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card-cream); border:1px solid var(--border-soft); border-radius:24px;
  padding:13px 8px 13px 20px; box-shadow:0 6px 14px rgba(65,35,25,0.07); cursor:pointer; width:100%;
  font-family:inherit;
}
.input-pill span{ font-size:14px; font-weight:600; color:var(--text-muted); }
.mic-btn{ width:36px; height:36px; border-radius:50%; background:var(--bg-secondary); display:flex; align-items:center; justify-content:center; color:var(--text-brown); flex-shrink:0; }

/* Chips */
.chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; padding:8px 14px; border-radius:16px; font-size:12.5px; font-weight:700;
  white-space:nowrap; background:var(--card-cream); border:1px solid var(--border-soft);
  color:var(--text-secondary); cursor:pointer;
}
.chip.active{ background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 6px 14px rgba(255,114,95,0.35); }

/* Khata strip */
.khata-strip{ background:var(--bg-secondary); border:1px solid var(--border-soft); border-radius:18px; padding:14px 16px; cursor:pointer; }
.khata-strip .khata-title{ display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:13.5px; color:var(--text-brown); margin-bottom:6px; }
.khata-row{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.khata-row b{ color:var(--text-main); font-weight:800; }
.khata-row .amt{ color:var(--pending-text); font-weight:800; }

/* Bottom nav */
.bottom-nav{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-around;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom,10px)) 8px;
  background:var(--card-cream); border-top:1px solid var(--border-soft);
  position:sticky; bottom:0; z-index:20;
}
.nav-item{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 14px; border-radius:18px; color:var(--text-muted); cursor:pointer; background:none; border:none; font-family:inherit; }
.nav-item span{ font-size:11px; font-weight:700; }
.nav-item.active{ background:rgba(255,114,95,0.12); color:var(--coral); }

/* Page header */
.page-header{ display:flex; align-items:center; gap:10px; padding:2px; }
.page-header h1{ margin:0; font-family:'Manrope',sans-serif; font-weight:800; font-size:20px; }
.back-btn{ width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--card-cream); border:1px solid var(--border-soft); cursor:pointer; color:var(--text-main); }

/* Form elements */
.field-label{ font-size:13px; font-weight:800; color:var(--text-brown); margin-bottom:6px; display:block; }
.field-block{ display:flex; flex-direction:column; gap:6px; }
input[type=text], input[type=number], input[type=tel], textarea, select{
  width:100%; padding:13px 16px; border-radius:16px; border:1px solid var(--border-soft);
  background:var(--card-cream); font-family:inherit; font-size:14px; font-weight:600; color:var(--text-main);
  outline:none;
}
input:focus, textarea:focus, select:focus{ border-color:var(--coral); }
textarea{ resize:vertical; min-height:70px; line-height:1.4; }

.phone-row{ display:flex; gap:8px; align-items:stretch; }
.phone-row input{ flex:1; min-width:0; }
.contact-btn{ flex:0 0 auto; padding:0 12px; border-radius:16px; font-size:12px; }
.field-hint{ color:var(--text-muted); font-size:11.5px; font-weight:700; line-height:1.3; }

select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%2375615C' stroke-width='2' fill='none' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; padding-right:36px; }

.primary-btn{
  width:100%; padding:15px; border-radius:18px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--coral) 0%, var(--coral-2) 100%); color:#fff;
  font-family:inherit; font-weight:800; font-size:15.5px; box-shadow:0 12px 20px rgba(232,89,75,0.28);
  transition:transform .15s ease;
}
.primary-btn:active{ transform:scale(0.98); }
.primary-btn:disabled{ opacity:0.6; cursor:default; transform:none; }

/* Card Action Box */
.card-action-box{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* Tone Pills Row */
.tone-pills-row{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tone-pill-label{
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-muted);
  margin-right: 2px;
}
.tone-pill{
  background: #FFFDF8;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.tone-pill:hover, .tone-pill:active{
  background: #FFE8E5;
  border-color: #FF725F;
  color: #C0392B;
}

/* Main Action Grid (2 Primary Bold Buttons) */
.main-btn-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.action-btn-main{
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13.5px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.action-btn-main:active{
  transform: scale(0.97);
}
.action-btn-main.btn-wa-direct{
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.action-btn-main.btn-card-share{
  background: linear-gradient(135deg, #FF725F 0%, #E8594B 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 114, 95, 0.32);
}

/* Sub-btn row (Compact Utility Bar) */
.sub-btn-row{
  display: flex;
  gap: 6px;
}
.sub-btn-row .ghost-btn{
  flex: 1;
  padding: 8px 10px;
  font-size: 11.5px;
  border-radius: 12px;
  min-width: 0;
}
@media(max-width: 380px){
  .main-btn-grid{
    grid-template-columns: 1fr;
  }
}

.ghost-btn{
  padding:10px 14px; border-radius:14px; border:1px solid var(--border-soft); background:var(--card-cream);
  color:var(--text-main); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer;
  display:flex; align-items:center; gap:6px; justify-content:center;
}
.ghost-btn:active{ transform:scale(0.96); }
.ghost-btn.whatsapp{ background:#25D366; color:#fff; border-color:#25D366; }
.ghost-btn.copy{ background:var(--bg-secondary); }
.ghost-btn.save{ background:var(--coral); color:#fff; border-color:var(--coral); }
.ghost-btn.danger{ background:#FFE7E3; color:#B23A2C; border-color:#FFD3CB; }

.btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.btn-row .ghost-btn{ flex:1; min-width:90px; }

/* Loading */
.loading-box{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:36px 10px; text-align:center; }
.loading-coin{ font-size:44px; animation:spin 1.4s linear infinite; }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.loading-box p{ margin:0; font-weight:700; color:var(--text-secondary); font-size:14px; }

/* Output cards */
.output-card{ background:var(--card-cream); border:1px solid var(--card-border); border-radius:18px; padding:16px; box-shadow:0 8px 18px rgba(65,35,25,0.08); display:flex; flex-direction:column; gap:8px; }
.output-card .tag{ display:inline-flex; align-self:flex-start; padding:4px 12px; border-radius:12px; background:var(--pending-bg); color:var(--pending-text); font-weight:800; font-size:11.5px; }

/* Safety banner */
.safety-banner{ background:#FFF0C7; border:1px solid #F0DFCF; color:#9A6810; border-radius:14px; padding:12px 14px; font-size:12.5px; font-weight:700; }
#vasooli-output{ scroll-margin-top:14px; }

/* Khata */
.summary-card{ background:linear-gradient(135deg,var(--coral) 0%, var(--coral-2) 100%); border-radius:20px; padding:18px 20px; color:#fff; box-shadow:0 15px 25px rgba(232,89,75,0.25); }
.summary-card .amt{ font-family:'Manrope',sans-serif; font-weight:900; font-size:26px; }
.summary-card .sub{ font-size:13px; font-weight:600; opacity:0.95; margin-top:2px; }

.list-card{ background:var(--card-cream); border:1px solid var(--card-border); border-radius:16px; padding:14px 16px; box-shadow:0 6px 14px rgba(65,35,25,0.06); display:flex; flex-direction:column; gap:6px; }
.list-card .row-top{ display:flex; align-items:center; justify-content:space-between; }
.list-card .name{ font-weight:800; font-size:14.5px; }
.list-card .amount{ font-weight:900; font-size:15px; }
.list-card .meta{ font-size:12px; color:var(--text-secondary); font-weight:600; }
.status-badge{ display:inline-flex; padding:3px 10px; border-radius:10px; font-size:11px; font-weight:800; }
.status-badge.pending{ background:var(--pending-bg); color:var(--pending-text); }
.status-badge.paid{ background:var(--paid-bg); color:var(--paid-text); }

.empty-state{ text-align:center; padding:50px 20px; color:var(--text-muted); }
.empty-state .emoji{ font-size:42px; display:block; margin-bottom:10px; }
.empty-state p{ font-weight:700; font-size:14px; margin:0; }

/* Settings */
.settings-item{ background:var(--card-cream); border:1px solid var(--card-border); border-radius:16px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.settings-item .label{ font-weight:700; font-size:13.5px; }
.toggle{ width:44px; height:26px; border-radius:14px; background:var(--border-soft); position:relative; cursor:pointer; flex-shrink:0; transition:background .2s; }
.toggle.on{ background:var(--coral); }
.toggle .knob{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 2px 4px rgba(0,0,0,0.2); }
.toggle.on .knob{ left:21px; }

/* Menu drawer */
.overlay{ position:fixed; top:0; right:0; bottom:0; left:0; inset:0; background:rgba(38,24,24,0.45); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.overlay.show{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; left:-300px; width:280px; height:100%; background:var(--bg-primary);
  z-index:50; transition:left .25s ease; display:flex; flex-direction:column; padding:20px 18px;
  box-shadow:8px 0 30px rgba(0,0,0,0.15);
}
.drawer.show{ left:0; }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.drawer-link{ padding:13px 10px; border-radius:12px; font-weight:700; font-size:14px; color:var(--text-main); cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.drawer-link:active{ background:rgba(72,42,33,0.06); }
.drawer-link.disabled{ color:var(--text-muted); }
.drawer-link .badge{ font-size:10px; font-weight:800; background:var(--pending-bg); color:var(--pending-text); padding:2px 8px; border-radius:8px; }
.drawer-footer{ margin-top:auto; text-align:center; font-size:12px; color:var(--text-muted); font-weight:700; padding-top:14px; }

/* Toast */
#toast{
  position:fixed; left:50%; bottom:100px; transform:translate(-50%,20px); background:var(--text-main); color:#fff;
  padding:12px 20px; border-radius:14px; font-weight:700; font-size:13px; z-index:100; opacity:0;
  transition:opacity .25s ease, transform .25s ease; pointer-events:none; max-width:88%; text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* misc */
.section-title{ font-family:'Manrope',sans-serif; font-weight:800; font-size:16px; margin:4px 2px 0 2px; }
.divider{ height:1px; background:var(--border-soft); margin:4px 0; }

/* ===========================================================
   v1.0.7 — Mascot Integration + Performance (2G/3G ready)
   =========================================================== */

/* Empty state mascots — smart sizing */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px; text-align:center; gap:14px;
  min-height:280px;
}
.empty-state .empty-mascot{
  width:160px; height:160px; object-fit:contain;
  filter: drop-shadow(0 8px 16px rgba(230,150,20,0.25));
  animation: bbEmptyFloat 3.5s ease-in-out infinite;
}
.empty-state p{
  margin:0; font-size:14.5px; color:var(--text-secondary);
  font-weight:600; line-height:1.5; max-width:280px;
}
.empty-state p b{ color:var(--text-main); }
@keyframes bbEmptyFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-6px) rotate(2deg); }
}

/* Loading mascot */
.loading-box{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:30px 20px; text-align:center;
}
.loading-mascot{
  width:100px; height:100px; object-fit:contain;
  animation: bbLoadingThink 1.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(230,150,20,0.25));
}
@keyframes bbLoadingThink{
  0%,100%{ transform:rotate(-6deg) scale(1); }
  50%{ transform:rotate(6deg) scale(1.05); }
}
.loading-box p{
  margin:0; font-size:14px; font-weight:700; color:var(--text-brown);
}

/* 🎉 Paid Celebration Popup */
.bb-celebrate-overlay{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:9998;
  width:100%; height:100%;
  background:rgba(20,10,5,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
}
.bb-celebrate-overlay.show{ opacity:1; pointer-events:auto; }
.bb-celebrate-card{
  background:linear-gradient(160deg,#FFF9E8,#FFEACC);
  border-radius:22px; padding:26px 24px 22px 24px;
  max-width:320px; text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.35);
  transform:scale(0.85);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.bb-celebrate-overlay.show .bb-celebrate-card{ transform:scale(1); }
.bb-celebrate-card img{
  width:150px; height:150px; object-fit:contain;
  animation: bbCelebrateBounce .8s ease-out;
}
@keyframes bbCelebrateBounce{
  0%{ transform:scale(0.3) rotate(-15deg); opacity:0; }
  60%{ transform:scale(1.15) rotate(8deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); }
}
.bb-celebrate-card h2{
  margin:8px 0 6px 0; font-family:'Manrope',sans-serif;
  font-weight:900; font-size:22px; color:#261818;
}
.bb-celebrate-card p{
  margin:0; font-size:14px; font-weight:600; color:#75615C;
}
.bb-celebrate-card p b{ color:#261818; font-weight:800; }
.bb-celebrate-tag{
  margin-top:10px !important;
  color:#EC6758 !important; font-weight:800 !important;
  font-size:13px !important;
}

/* ===========================================================
   PERFORMANCE — 2G/3G / Low-end phone optimizations
   =========================================================== */

/* GPU acceleration for smooth scrolling */
.content, .drawer{ will-change:scroll-position; -webkit-overflow-scrolling:touch; }

/* Prevent layout shift while images load */
img[width][height]{ height:auto; max-width:100%; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Slow connection — pause decorative animations */
@media (prefers-reduced-data: reduce){
  .empty-mascot, .loading-mascot, .mascot-img{ animation: none !important; }
}

/* Data saver mode (older Chrome) */
@media (max-width:480px){
  /* Smaller mascots on tiny screens */
  .empty-state .empty-mascot{ width:130px; height:130px; }
  .bb-celebrate-card img{ width:120px; height:120px; }
}

/* ===========================================================
   v1.0.8 — Hero Banner Integration (Big, Attractive)
   =========================================================== */

/* Hero card with banner image */
.hero-card-banner{
  position:relative;
  padding:0 !important;
  overflow:hidden;
  min-height:200px;
  display:flex; align-items:flex-end;
  background:linear-gradient(135deg,#FF725F,#FF9278);
}
.hero-banner-img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
  opacity:0.95;
}
.hero-card-content{
  position:relative; z-index:2;
  padding:18px 20px 20px 20px;
  width:100%;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55) 100%);
}
.hero-card-banner h2{
  margin:0 0 4px 0 !important;
  font-family:'Manrope',sans-serif;
  font-weight:900; font-size:26px !important;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.hero-card-banner p{
  margin:0 !important;
  font-weight:700; font-size:14px !important;
  color:rgba(255,255,255,0.98);
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.hero-cta-pill{
  display:inline-block; margin-top:10px;
  background:rgba(255,255,255,0.95); color:#EC6758;
  padding:7px 14px; border-radius:14px;
  font-weight:800; font-size:12.5px;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* Bigger celebration mascot */
.bb-celebrate-card{ padding:30px 26px 26px 26px !important; max-width:340px !important; }
.bb-celebrate-card img{ width:180px !important; height:180px !important; }
.bb-celebrate-card h2{ font-size:24px !important; margin:12px 0 8px 0 !important; }

/* Bigger empty state mascots */
.empty-state .empty-mascot{ width:200px; height:200px; }
@media(max-width:400px){
  .empty-state .empty-mascot{ width:170px; height:170px; }
  .hero-card-banner{ min-height:180px; }
  .hero-card-banner h2{ font-size:22px !important; }
}

/* NEW badge for menu items */
.badge-new{
  background:#22c55e; color:#fff;
  padding:2px 7px; border-radius:8px;
  font-size:10px; font-weight:800;
  margin-left:6px; letter-spacing:0.5px;
  vertical-align:middle;
  animation: badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,0.5); }
  50%{ box-shadow:0 0 0 5px rgba(34,197,94,0); }
}

/* ===========================================================
   v1.1.0 — Next Level Khata + Relationship Safe Score
   =========================================================== */
input[type=date]{
  width:100%; padding:13px 16px; border-radius:16px; border:1px solid var(--border-soft);
  background:var(--card-cream); font-family:inherit; font-size:14px; font-weight:600; color:var(--text-main);
  outline:none;
}
input[type=date]:focus{ border-color:var(--coral); }
.safe-score{
  align-self:flex-start;
  background:#EFFFF3;
  color:#247C32;
  border:1px solid #CBEFD0;
  border-radius:12px;
  padding:6px 10px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.25;
}
.status-badge.partial{ background:#FFEACC; color:#A65300; }
.status-badge.overdue{ background:#FFE7E3; color:#B23A2C; }
.list-card.overdue-card{
  border-color:#FFD3CB;
  box-shadow:0 8px 18px rgba(178,58,44,0.10);
}
@media(max-width:420px){
  .safe-score{ font-size:11px; }
  .btn-row .ghost-btn{ min-width:86px; }
}

/* ===========================================================
   v1.1.1 — Smart Templates + Bulk Reminder Queue
   =========================================================== */
.template-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}
.template-card{
  min-height:104px;
  border:1px solid var(--border-soft);
  background:var(--card-cream);
  border-radius:18px;
  padding:12px;
  text-align:left;
  font-family:inherit;
  color:var(--text-main);
  cursor:pointer;
  box-shadow:0 6px 14px rgba(65,35,25,0.05);
  display:flex;
  flex-direction:column;
  gap:5px;
}
.template-card span{ font-size:24px; }
.template-card b{ font-family:'Manrope',sans-serif; font-size:13.5px; line-height:1.2; }
.template-card small{ color:var(--text-muted); font-weight:800; font-size:11px; }
.template-card.active{
  border-color:var(--coral);
  background:linear-gradient(135deg,#FFF5DF,#FFFDF8);
  box-shadow:0 8px 18px rgba(255,114,95,0.16);
}
.quick-add-box{
  display:flex;
  gap:8px;
  align-items:stretch;
  background:var(--bg-secondary);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:8px;
}
.quick-add-box input{ flex:1; min-width:0; background:#fff; }
.quick-add-box .ghost-btn{ flex:0 0 auto; }
@media(max-width:420px){
  .template-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .quick-add-box{ flex-direction:column; }
}

/* ===== Pending Reminders signal card (home) ===== */
.signal-card{ background:#fff; border:1.5px solid #f0e7dd; border-radius:20px; padding:14px 14px 10px; box-shadow:0 6px 18px rgba(43,36,32,.05); }
.signal-title{ display:flex; align-items:center; justify-content:space-between; font-weight:900; font-size:15px; color:#2b2420; margin-bottom:10px; }
.sig-legend{ font-weight:600; font-size:11px; color:#8a8078; display:flex; align-items:center; gap:4px; }
.sig-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; }
.sig-dot.g{ background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.sig-dot.y{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.sig-dot.r{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.sig-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; cursor:pointer; margin-bottom:7px; border:1.5px solid transparent; transition:transform .1s ease; }
.sig-row:active{ transform:scale(.985); }
.sig-row.sig-red{ background:#fef2f2; border-color:#fecaca; }
.sig-row.sig-yellow{ background:#fffbeb; border-color:#fde68a; }
.sig-row.sig-green{ background:#f0fdf4; border-color:#bbf7d0; }
.sig-info{ flex:1; min-width:0; }
.sig-info b{ display:block; font-size:14px; color:#2b2420; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sig-info span{ display:block; font-size:12px; font-weight:700; color:#8a8078; margin-top:1px; }
.sig-row.sig-red .sig-info span{ color:#b91c1c; }
.sig-row.sig-yellow .sig-info span{ color:#b45309; }
.sig-row.sig-green .sig-info span{ color:#15803d; }
.sig-cta{ font-size:12px; font-weight:800; color:#FF4E42; white-space:nowrap; }
.signal-more{ text-align:center; font-size:12px; font-weight:700; color:#8a8078; padding:2px 0 6px; }
.signal-all{ text-align:center; font-size:12.5px; font-weight:800; color:#8a3b32; padding:8px 0 4px; cursor:pointer; border-top:1px dashed #f0e7dd; margin-top:4px; }

/* ===== Card Style picker ===== */
.theme-pick{ margin:2px 0 12px; }
.theme-pick-title{ font-size:12.5px; font-weight:900; color:#5A302B; margin-bottom:8px; }
.theme-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; }
.theme-chips::-webkit-scrollbar{ display:none; }
.theme-chip{ flex:none; border:2px solid #F0DFCF; background:#FFFDF8; color:#5A302B; font-weight:800; font-size:12px; padding:8px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.theme-chip.active{ background:#261818; border-color:#261818; color:#FFE9A8; }

/* ===== Reminder card base ===== */
.output-card.rcard{ position:relative; overflow:hidden; gap:12px; border-radius:22px; padding:18px; box-shadow:0 8px 24px rgba(65,35,25,0.08); }
.rc-stamp{ align-self:flex-end; transform:rotate(2deg); font-size:11px; font-weight:900; letter-spacing:1px; padding:4px 12px; border-radius:8px; }
.rc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rc-mode{ font-size:13px; font-weight:900; letter-spacing:.4px; }
.rc-tone{ font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.rc-to{ font-size:10.5px; font-weight:900; letter-spacing:2px; opacity:.75; margin-top:2px; }
.rc-name{ font-size:22px; font-weight:900; line-height:1.2; }
.rc-amt{ font-size:38px; font-weight:900; letter-spacing:-.5px; line-height:1.1; margin:2px 0; }
.rc-msg{ width:100%; border-radius:16px; padding:14px 16px; font-size:14.5px; line-height:1.65; font-family:inherit; min-height:110px; resize:vertical; font-weight:600; border:1.5px solid #EADDC8; background:#FFFDF8; color:#3A2420; }
.rc-msg-display{ width:100%; border-radius:18px; padding:18px 20px; font-size:18px; line-height:1.65; font-family:inherit; font-weight:700; white-space:pre-wrap; border:1.5px solid #EADDC8; background:#FFFDF8; color:#3A2420; box-shadow:0 4px 14px rgba(0,0,0,0.04); }
.rc-foot{ text-align:center; font-size:12px; font-weight:800; opacity:.85; letter-spacing:0.3px; padding-top:2px; }
.rcard .safe-score{ font-size:11.5px; padding:6px 12px; border-radius:12px; font-weight:800; }
.rcard .btn-row{ margin:0; }

/* ===== Premium cards P1-P10 ===== */
.rc-hint{ font-size:11px; text-align:center; opacity:.65; }
/* P1 Classic Band */
.t-p1{ background:#FFFDF8; border:1.5px solid #F0DFCF; border-top:10px solid #FF725F; }
.t-p1 .rc-mode{ color:#FF725F; } .t-p1 .rc-tone{ background:#FFF0C7; color:#9A6810; }
.t-p1 .rc-name{ color:#261818; } .t-p1 .rc-amt{ color:#FF725F; }
.t-p1 .rc-msg, .t-p1 .rc-msg-display{ background:#FFF9E8; border:1.5px solid #E3D3B4; color:#5A302B; font-weight:600; }
.t-p1 .rc-foot{ color:#9D8781; }
/* P2 Coral Blast */
.t-p2{ background:linear-gradient(165deg,#FF9278,#EC6758); border:1.5px solid #d94f42; }
.t-p2 .rc-mode{ color:#fff; } .t-p2 .rc-tone{ background:#d94f42; color:#fff; }
.t-p2 .rc-to{ color:#ffd9d2; } .t-p2 .rc-name{ color:#fff; }
.t-p2 .rc-amt{ color:#fff; }
.t-p2 .safe-score{ color:#ffe3de; background:rgba(120,20,15,.28); border-color:rgba(255,255,255,.4); } .t-p2 .safe-score b{ color:#fff; }
.t-p2 .rc-msg, .t-p2 .rc-msg-display{ background:#fff; border:1.5px solid #fff; color:#5A302B; font-weight:600; }
.t-p2 .rc-foot{ color:#ffe3de; }
.t-p2 .ghost-btn{ border-color:#fff; color:#fff; background:rgba(255,255,255,.15); }
/* P3 Midnight Gold */
.t-p3{ background:linear-gradient(165deg,#2E1E1A,#1B1110); border:1.5px solid #4a3230; }
.t-p3 .rc-mode{ color:#E8B44B; letter-spacing:1px; } .t-p3 .rc-tone{ background:#3a2a20; color:#E8B44B; border:1px solid #5a4a38; }
.t-p3 .rc-to{ color:#a68a5a; } .t-p3 .rc-name{ color:#FFF3DC; font-family:Georgia,serif; }
.t-p3 .rc-amt{ color:#FFE9A8; font-family:Georgia,serif; }
.t-p3 .safe-score{ color:#a68a5a; background:rgba(232,180,75,.14); border-color:#5a4a38; } .t-p3 .safe-score b{ color:#FFE9A8; }
.t-p3 .rc-msg, .t-p3 .rc-msg-display{ background:#241512; border:1.5px solid #5a4a38; color:#F5E6CE; font-family:Georgia,serif; }
.t-p3 .rc-foot{ color:#a68a5a; }
.t-p3 .ghost-btn{ border-color:#5a4a38; color:#FFE9A8; background:rgba(232,180,75,.08); }
/* P4 Khata Ledger */
.t-p4{ background:repeating-linear-gradient(#FFFDF6 0 26px,#EADFC8 26px 27px); background-color:#FFFDF6; border:1.5px solid #c9b589; }
.t-p4 .rc-stamp{ background:#fff; color:#c0272d; border:2px solid #c0272d; transform:rotate(-3deg); }
.t-p4 .rc-mode{ color:#9A6810; } .t-p4 .rc-tone{ background:#4a2f18; color:#f7ecd4; }
.t-p4 .rc-to{ color:#8a6a45; } .t-p4 .rc-name{ color:#261818; font-family:Georgia,serif; }
.t-p4 .rc-amt{ color:#c0272d; font-family:Georgia,serif; }
.t-p4 .safe-score{ color:#8a6a45; } .t-p4 .safe-score b{ color:#4a2f18; }
.t-p4 .rc-msg, .t-p4 .rc-msg-display{ background:rgba(255,253,246,.85); border:1.5px solid #c9b589; border-left:4px solid #FF725F; color:#5A302B; font-family:Georgia,serif; }
.t-p4 .rc-foot{ color:#8a6a45; }
.t-p4 .ghost-btn{ border-color:#9A6810; color:#4a2f18; background:#FFFDF6; }
/* P5 Chat Style */
.t-p5{ background:#ECE5DD; border:1.5px solid #c9c2b4; }
.t-p5 .rc-stamp{ background:#075E54; color:#fff; }
.t-p5 .rc-mode{ color:#075E54; } .t-p5 .rc-tone{ background:#075E54; color:#fff; }
.t-p5 .rc-to{ color:#667781; } .t-p5 .rc-name{ color:#111; }
.t-p5 .rc-amt{ color:#075E54; }
.t-p5 .safe-score{ color:#667781; } .t-p5 .safe-score b{ color:#075E54; }
.t-p5 .rc-msg, .t-p5 .rc-msg-display{ background:#DCF8C6; border:none; border-radius:4px 16px 16px 16px; color:#111; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.t-p5 .rc-foot{ color:#667781; }
.t-p5 .ghost-btn{ border-color:#075E54; color:#075E54; background:#fff; }
/* P6 Soft Luxury */
.t-p6{ background:linear-gradient(170deg,#FFF9E8,#FFEFD2); border:1.5px solid #E3D3B4; }
.t-p6 .rc-mode{ color:#9A6810; } .t-p6 .rc-tone{ background:#FFF0C7; color:#9A6810; }
.t-p6 .rc-to{ color:#9D8781; } .t-p6 .rc-name{ color:#261818; }
.t-p6 .rc-amt{ color:#FF725F; background:#FFF9E8; border:1.5px solid #E3D3B4; border-radius:14px; padding:4px 18px; display:inline-block; }
.t-p6 .safe-score{ color:#9D8781; } .t-p6 .safe-score b{ color:#9A6810; }
.t-p6 .rc-msg, .t-p6 .rc-msg-display{ background:#FFFDF8; border:1.5px solid #E3D3B4; color:#75615C; }
.t-p6 .rc-foot{ color:#9D8781; }
.t-p6 .ghost-btn{ border-color:#E3D3B4; color:#9A6810; background:#FFFDF8; }
/* P7 Vasooli Ticket */
.t-p7{ background:#FFF6E6; border:2px dashed #9A6810; }
.t-p7 .rc-stamp{ background:#261818; color:#FFE9A8; }
.t-p7 .rc-mode{ color:#9A6810; letter-spacing:1px; } .t-p7 .rc-tone{ background:#261818; color:#FFE9A8; }
.t-p7 .rc-to{ color:#8a6a45; } .t-p7 .rc-name{ color:#261818; }
.t-p7 .rc-amt{ color:#261818; font-family:ui-monospace,Menlo,monospace; }
.t-p7 .safe-score{ color:#8a6a45; } .t-p7 .safe-score b{ color:#261818; }
.t-p7 .rc-msg{ background:#fff; border:1.5px dashed #9A6810; color:#4a2f18; }
.t-p7 .rc-foot{ color:#8a6a45; font-family:ui-monospace,Menlo,monospace; }
.t-p7 .ghost-btn{ border-color:#9A6810; color:#4a2f18; background:#fff; }
/* P8 Neon Night */
.t-p8{ background:linear-gradient(165deg,#151522,#0d0d14); border:1.5px solid #FF725F; box-shadow:0 0 26px rgba(255,114,95,.35); }
.t-p8 .rc-mode{ color:#FF9278; letter-spacing:1px; } .t-p8 .rc-tone{ background:#2a1a20; color:#FF9278; border:1px solid #5a2a28; }
.t-p8 .rc-to{ color:#8a8699; } .t-p8 .rc-name{ color:#fff; }
.t-p8 .rc-amt{ color:#fff; text-shadow:0 0 18px rgba(255,114,95,.8); }
.t-p8 .safe-score{ color:#8a8699; background:rgba(255,255,255,.07); border-color:#3a3a4e; } .t-p8 .safe-score b{ color:#FF9278; }
.t-p8 .rc-msg{ background:#1c1c2a; border:1.5px solid #3a3a4e; color:#E8E3DC; }
.t-p8 .rc-foot{ color:#8a8699; }
.t-p8 .ghost-btn{ border-color:#FF725F; color:#FF9278; background:rgba(255,114,95,.08); }
/* P9 Gold Minimal */
.t-p9{ background:#fff; border:1px solid #C9A227; outline:1px solid #C9A227; outline-offset:4px; }
.t-p9 .rc-mode{ color:#C9A227; letter-spacing:3px; font-size:11px; } .t-p9 .rc-tone{ background:#1a1a1a; color:#fff; }
.t-p9 .rc-to{ color:#999; } .t-p9 .rc-name{ color:#1a1a1a; font-family:Georgia,serif; }
.t-p9 .rc-amt{ color:#1a1a1a; font-family:Georgia,serif; }
.t-p9 .safe-score{ color:#999; } .t-p9 .safe-score b{ color:#1a1a1a; }
.t-p9 .rc-msg{ background:#fff; border:1.5px solid #e2ddd2; color:#555; font-family:Georgia,serif; }
.t-p9 .rc-foot{ color:#999; letter-spacing:2px; }
.t-p9 .ghost-btn{ border-color:#C9A227; color:#7a6512; background:#fff; }
/* P10 Festive Pop */
.t-p10{ background:linear-gradient(170deg,#FFFDF8,#FFF0DC); border:1.5px solid #FF725F; border-top:10px solid #FF725F; }
.t-p10 .rc-mode{ color:#EC6758; } .t-p10 .rc-tone{ background:#FFF0C7; color:#9A6810; }
.t-p10 .rc-to{ color:#9D8781; } .t-p10 .rc-name{ color:#261818; }
.t-p10 .rc-amt{ color:#fff; background:#FF725F; border-radius:999px; padding:4px 22px; display:inline-block; }
.t-p10 .safe-score{ color:#9D8781; } .t-p10 .safe-score b{ color:#EC6758; }
.t-p10 .rc-msg{ background:#FFF0C7; border:1.5px solid #E8B44B; color:#5A302B; font-weight:600; }
.t-p10 .rc-foot{ color:#9D8781; }
.t-p10 .ghost-btn{ border-color:#FF725F; color:#EC6758; background:#fff; }

/* ===== Card art + dialogue (minimal base; premium themes use none) ===== */
.rc-art-wrap{ border-radius:14px; overflow:hidden; }
.rc-art{ width:100%; height:150px; object-fit:cover; display:block; border-radius:14px; }
.rc-dialogue{ font-size:13px; font-weight:700; font-style:italic; text-align:center; padding:10px 12px; border-radius:12px; border:1.5px dashed currentColor; }