@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --night:#1B2A4A; --night-deep:#101A30;
  --dawn:#FF8B6B; --dawn-soft:#FFC9A8;
  --cream:#FBF6EF; --ink:#24211D; --ink-soft:#55504A;
  --sage:#7C9885; --gold:#E8A94C;
  --line: rgba(36,33,29,0.10);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', sans-serif;
  background:#0E1420;
  color:var(--ink);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1rem;
}
.phone{
  width:100%;
  max-width:400px;
  background:var(--cream);
  border-radius:34px;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  overflow:hidden;
  border:8px solid #0B0F17;
  position:relative;
  min-height:720px;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; }
a{ color:inherit; }

/* ---- HOME SCREEN ---- */
.home-wrap{
  background:linear-gradient(160deg, #101A30, #1B2A4A 60%, #2C3F63);
  padding:2.4rem 1.3rem 1.6rem;
  color:#fff;
  min-height:712px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.status-row{
  display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:rgba(255,255,255,0.7);
  margin-bottom:2.2rem;
}
.home-icons{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem 0.8rem;
}
.app-icon{
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  font-size:0.66rem;
  color:rgba(255,255,255,0.85);
  text-align:center;
  text-decoration:none;
}
.icon-box{
  width:52px; height:52px; border-radius:14px;
  background:rgba(255,255,255,0.12);
}
.icon-box.mom{
  background:linear-gradient(135deg, var(--dawn), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:1.3rem;
  color:var(--night-deep);
  box-shadow:0 6px 18px rgba(255,139,107,0.4);
  border:2px solid rgba(255,255,255,0.4);
}
.home-hint{
  text-align:center;
  font-size:0.78rem;
  color:rgba(255,255,255,0.6);
  padding:1rem;
  border-top:1px solid rgba(255,255,255,0.12);
}
.home-hint b{ color:var(--dawn-soft); }

/* ---- LOGIN ---- */
.login-wrap{
  background:var(--cream);
  padding:2.6rem 1.6rem;
  min-height:712px;
  display:flex; flex-direction:column; justify-content:center;
}
.login-mark{
  width:56px; height:56px; border-radius:16px;
  background:linear-gradient(135deg, var(--dawn), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-size:1.5rem;
  color:var(--night-deep);
  margin-bottom:1.4rem;
}
.login-wrap h1{ font-size:1.5rem; margin-bottom:0.3rem; }
.login-wrap p.sub{ font-size:0.86rem; color:var(--ink-soft); margin-bottom:1.8rem; }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:0.76rem; color:var(--ink-soft); margin-bottom:0.35rem; font-weight:500; }
.field input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:0.8rem 0.9rem;
  font-size:0.95rem;
  font-family:'Inter', sans-serif;
  color:var(--ink);
}
.field input:focus-visible{ outline:2px solid var(--dawn); outline-offset:1px; }
.shop-tag{
  display:flex; align-items:center; gap:0.5rem;
  background:rgba(124,152,133,0.14);
  color:#4C6355;
  border-radius:10px;
  padding:0.6rem 0.8rem;
  font-size:0.78rem;
  margin-bottom:1.4rem;
}
.error-tag{
  background:rgba(255,139,107,0.15);
  color:#C15A3B;
  border-radius:10px;
  padding:0.6rem 0.8rem;
  font-size:0.8rem;
  margin-bottom:1.2rem;
}
.btn-primary{
  width:100%;
  background:var(--night-deep);
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  padding:0.85rem;
  border-radius:100px;
  border:none;
  cursor:pointer;
  font-family:'Inter', sans-serif;
}
.btn-primary:focus-visible{ outline:3px solid var(--night); outline-offset:3px; }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; }
.login-note{ text-align:center; font-size:0.74rem; color:var(--ink-soft); margin-top:1rem; }

/* ---- DASHBOARD ---- */
.dash-header{
  background:var(--night);
  color:#fff;
  padding:1.6rem 1.3rem 2.6rem;
  position:relative;
}
.dash-header .top-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.4rem; }
.shop-name{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; }
.shop-loc{ font-size:0.74rem; color:rgba(255,255,255,0.6); }
.logout-link{ font-size:0.7rem; color:rgba(255,255,255,0.6); text-decoration:underline; }
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--dawn-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; font-weight:600; color:var(--night-deep);
}
.wallet-card{
  background:linear-gradient(135deg, var(--dawn), var(--gold));
  border-radius:16px;
  padding:1.2rem 1.3rem;
  color:var(--night-deep);
}
.wallet-card .eyebrow{ opacity:0.75; }
.wallet-amt{ font-family:'Fraunces', serif; font-size:2rem; font-weight:700; margin:0.2rem 0 0.1rem; transition:all 0.3s ease; }
.wallet-meta{ display:flex; justify-content:space-between; font-size:0.76rem; margin-top:0.6rem; opacity:0.85; }
.progress-track{ margin-top:0.7rem; height:6px; border-radius:100px; background:rgba(16,26,48,0.18); overflow:hidden; }
.progress-fill{ height:100%; background:var(--night-deep); border-radius:100px; transition:width 0.4s ease; }
.progress-note{ font-size:0.7rem; margin-top:0.4rem; opacity:0.75; }

.dash-body{ padding:1.4rem 1.3rem 2rem; margin-top:-1.4rem; }
.stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; margin-bottom:1.3rem; }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:0.9rem; }
.stat-card .num{ font-family:'Fraunces', serif; font-size:1.4rem; font-weight:700; color:var(--night); }
.stat-card .lbl{ font-size:0.72rem; color:var(--ink-soft); }

.section-lbl{ font-size:0.9rem; font-weight:600; margin-bottom:0.7rem; display:flex; justify-content:space-between; align-items:center; }
.section-lbl span.pts{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--sage); }

.redeem-list{ display:grid; gap:0.6rem; }
.redeem-item{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:0.75rem 0.9rem; display:flex; justify-content:space-between; align-items:center;
  animation:slideIn 0.35s ease;
}
@keyframes slideIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }
.redeem-item .code{ font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--ink); }
.redeem-item .when{ font-size:0.68rem; color:var(--ink-soft); }
.redeem-item .amt{ font-family:'IBM Plex Mono', monospace; font-size:0.82rem; font-weight:600; color:var(--sage); }

.status-banner{
  border-radius:10px;
  padding:0.7rem 0.9rem;
  font-size:0.82rem;
  font-weight:500;
  margin-bottom:1rem;
}
.status-banner.good{ background:rgba(124,152,133,0.16); color:#4C6355; }
.status-banner.warn{ background:rgba(255,139,107,0.15); color:#C15A3B; }

.sim-card{
  margin-top:1.4rem;
  background:var(--night);
  color:#fff;
  border-radius:14px;
  padding:1.1rem;
}
.sim-card h3{ font-size:0.95rem; margin-bottom:0.3rem; }
.sim-card p{ font-size:0.78rem; color:rgba(255,255,255,0.75); margin-bottom:0.9rem; }
.sim-btn{
  width:100%;
  background:linear-gradient(135deg, var(--dawn), var(--gold));
  color:var(--night-deep);
  font-weight:600;
  font-size:0.88rem;
  padding:0.75rem;
  border-radius:100px;
  border:none;
  cursor:pointer;
  font-family:'Inter', sans-serif;
}
.sim-btn:active{ transform:scale(0.98); }

.payout-card{ margin-top:1.4rem; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.1rem; }
.payout-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4rem; }
.payout-top h3{ font-size:0.95rem; }
.lock-badge{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; background:rgba(255,139,107,0.15); color:#C15A3B; padding:3px 8px; border-radius:100px; }
.lock-badge.unlocked{ background:rgba(124,152,133,0.16); color:#4C6355; }
.payout-card p{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:0.9rem; }
.payout-methods{ display:flex; gap:0.5rem; margin-bottom:0.9rem; }
.method-btn{
  flex:1; padding:0.5rem; border-radius:100px; border:1px solid var(--line);
  background:#fff; font-family:'Inter', sans-serif; font-size:0.78rem; font-weight:500;
  color:var(--ink-soft); cursor:pointer;
}
.method-btn.active{ background:var(--night); color:#fff; border-color:var(--night); }