:root{
  --rose-950:#6e3d53;
  --rose-900:#8e526b;
  --rose-750:#aa6d86;
  --rose-600:#c88aa2;
  --rose-400:#e2adc1;
  --rose-200:#f4d9e4;
  --rose-100:#fff0f5;
  --cream:#fff9fb;
  --white:#ffffff;
  --ink:#30242b;
  --muted:#897b82;
  --line:#f0e2e8;
  --green:#e4f4e8;
  --green-ink:#4d7659;
  --yellow:#fff4d8;
  --yellow-ink:#8c6d20;
  --red:#fbe4e9;
  --red-ink:#99475f;
  --shadow:0 12px 34px rgba(110,61,83,.11);
  --shadow-strong:0 18px 45px rgba(110,61,83,.17);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--cream);scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top right,rgba(244,217,228,.60),transparent 28%),
    linear-gradient(180deg,#fff 0%,#fff8fb 100%);
}
button,input,select{font:inherit}
.app{max-width:580px;min-height:100vh;margin:0 auto;padding:16px 14px 118px}
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#fff 0%,#fff3f7 100%);
  border:1px solid var(--line);border-radius:30px;padding:18px;box-shadow:var(--shadow)
}
.hero::after{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  right:-78px;top:-88px;background:rgba(226,173,193,.33)
}
.profile{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.avatar{
  width:72px;height:72px;object-fit:cover;border-radius:24px;
  border:4px solid #fff;box-shadow:0 10px 26px rgba(110,61,83,.18)
}
.hero h1{font-size:23px;color:var(--rose-900);margin:0 0 4px}
.hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.brand-pill{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 11px;
  border-radius:999px;background:var(--rose-100);color:var(--rose-900);
  font-size:12px;font-weight:800
}
.install-banner{
  display:none;margin-top:12px;
  background:linear-gradient(135deg,var(--rose-900),var(--rose-750));
  color:#fff;border-radius:22px;padding:14px 15px;box-shadow:var(--shadow-strong);
  align-items:center;justify-content:space-between;gap:12px
}
.install-banner.show{display:flex}
.install-banner button{background:#fff;color:var(--rose-900);padding:11px 14px;border-radius:14px;border:0;font-weight:800}
.monthbar{
  display:flex;align-items:center;justify-content:space-between;margin:14px 0;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px 8px;box-shadow:var(--shadow)
}
.monthbar button{
  width:40px;height:40px;border:0;border-radius:14px;background:var(--rose-100);
  color:var(--rose-900);font-weight:900
}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.card,.panel{
  background:rgba(255,255,255,.97);border:1px solid var(--line);
  border-radius:24px;padding:15px;box-shadow:var(--shadow)
}
.card-icon{
  width:38px;height:38px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:var(--rose-100);margin-bottom:9px;font-size:18px
}
.card small,.meta{color:var(--muted);font-size:12px}
.value{font-size:22px;font-weight:850;color:var(--rose-900);margin-top:5px}
.section{
  display:flex;align-items:center;justify-content:space-between;
  margin:24px 4px 11px;color:var(--rose-900);font-size:18px;font-weight:850
}
.section span{font-size:12px;color:var(--muted);font-weight:650}
.list{display:flex;flex-direction:column;gap:10px}
.item{
  background:#fff;border:1px solid var(--line);border-radius:21px;padding:14px;
  box-shadow:0 8px 22px rgba(110,61,83,.07);
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.item strong{font-size:15px}
.check{display:flex;align-items:center;gap:10px}
.check input{width:22px;height:22px;accent-color:var(--rose-900)}
.paid{opacity:.68}.paid strong{text-decoration:line-through}
.badge{
  padding:6px 9px;border-radius:999px;background:var(--rose-100);
  color:var(--rose-900);font-size:11px;font-weight:850
}
.badge.ok{background:var(--green);color:var(--green-ink)}
.badge.warn{background:var(--yellow);color:var(--yellow-ink)}
.note{
  background:linear-gradient(135deg,#fff8fb,var(--rose-100));
  border:1px solid var(--line);border-radius:20px;padding:13px;
  color:var(--rose-900);font-size:14px;line-height:1.45
}
label{display:block;margin:12px 0 7px;font-size:13px;font-weight:700;color:var(--muted)}
input,select{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:17px;
  background:#fff;color:var(--ink);outline:none;font-size:16px
}
input:focus,select:focus{border-color:var(--rose-400);box-shadow:0 0 0 4px rgba(226,173,193,.15)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button{border:0;border-radius:17px;padding:14px 15px;font-size:15px;font-weight:850;cursor:pointer}
.primary{
  width:100%;margin-top:15px;color:#fff;
  background:linear-gradient(135deg,var(--rose-900),var(--rose-750));
  box-shadow:0 10px 23px rgba(110,61,83,.18)
}
.secondary{background:var(--rose-100);color:var(--rose-900)}
.danger{background:var(--red);color:var(--red-ink)}
.small{padding:8px 10px;font-size:12px;border-radius:13px}
.progress{height:10px;background:#f6e9ee;border-radius:999px;overflow:hidden;margin-top:9px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--rose-400),var(--rose-900));border-radius:999px}
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding-bottom:max(4px,env(safe-area-inset-bottom))
}
.tabs>div{max-width:580px;width:100%;display:grid;grid-template-columns:repeat(6,1fr)}
.tab{background:none;color:var(--muted);padding:10px 2px 9px;font-size:10px;border-radius:0}
.tab b{display:block;font-size:18px;margin-bottom:3px}
.tab.active{color:var(--rose-900)}
.screen{display:none}.screen.active{display:block}
.fab{
  position:fixed;right:18px;bottom:90px;z-index:24;width:58px;height:58px;border-radius:20px;padding:0;
  background:linear-gradient(135deg,var(--rose-900),var(--rose-750));color:#fff;font-size:28px;
  box-shadow:0 14px 28px rgba(110,61,83,.27)
}
.modal{
  position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;
  background:rgba(48,36,43,.44);backdrop-filter:blur(5px)
}
.modal.show{display:flex}
.modal-card{
  width:100%;max-width:580px;max-height:88vh;overflow:auto;
  background:#fff;border-radius:28px 28px 0 0;padding:20px;
  box-shadow:0 -14px 36px rgba(48,36,43,.18)
}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.onboarding{
  position:fixed;inset:0;z-index:100;display:none;background:var(--cream);padding:24px
}
.onboarding.show{display:flex}
.onboard-card{max-width:480px;margin:auto;text-align:center}
.onboard-card img{width:108px;height:108px;object-fit:cover;border-radius:32px;box-shadow:var(--shadow)}
.dots{display:flex;justify-content:center;gap:7px;margin:20px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--rose-200)}
.dot.on{width:22px;border-radius:999px;background:var(--rose-900)}
.empty{text-align:center;color:var(--muted);padding:24px 8px}
.chart{display:flex;gap:8px;align-items:flex-end;height:130px;padding-top:12px}
.bar{flex:1;background:linear-gradient(180deg,var(--rose-400),var(--rose-900));border-radius:10px 10px 4px 4px;min-height:8px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.legend-item{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
@media(max-width:380px){.grid,.row{grid-template-columns:1fr}}