/* ==========================================================================
   HAPI — Product UI mockups (pure HTML/CSS, resolution independent)
   A miniature design system for the fake Hapi app shown throughout the page
   ========================================================================== */

.app{
  --r: 16px;
  position:relative;
  width:100%;
  border-radius:var(--r);
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(255,231,183,.55), transparent 60%),
    linear-gradient(180deg,#FFFDF8, #FBF7EF);
  border:1px solid rgba(22,17,10,.075);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 1px 0 rgba(255,255,255,.9) inset,
    var(--e3);
  overflow:hidden;
  font-size:13px;
  color:var(--ink);
  isolation:isolate;
  container-type:inline-size;
}
.app::after{ /* glass reflection sweep */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background:linear-gradient(122deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 22%, transparent 42%);
  mix-blend-mode:screen; opacity:.75;
}

/* ---- window chrome ---- */
.app-bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border-bottom:1px solid rgba(22,17,10,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55));
  backdrop-filter:blur(8px);
}
.dots{ display:flex; gap:6px; }
.dots i{ width:9px; height:9px; border-radius:50%; background:#E2DBCC; display:block; }
.dots i:nth-child(1){ background:#EFB2A0; } .dots i:nth-child(2){ background:#F0D19B; } .dots i:nth-child(3){ background:#BBD9B4; }
.omni{
  flex:1; height:24px; border-radius:7px;
  background:rgba(22,17,10,.045);
  border:1px solid rgba(22,17,10,.05);
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; color:var(--muted-2); letter-spacing:.01em;
}
.omni b{ color:var(--ink-soft); font-weight:550; }

/* ---- shell ---- */
.app-shell{ display:grid; grid-template-columns:184px 1fr; min-height:0; }
.app-shell.no-side{ grid-template-columns:1fr; }

.side{
  padding:16px 12px;
  border-right:1px solid rgba(22,17,10,.06);
  background:linear-gradient(180deg, rgba(250,245,235,.9), rgba(247,241,229,.65));
  display:flex; flex-direction:column; gap:5px;
}
.side-brand{
  display:flex; align-items:center; gap:9px; padding:2px 8px 16px;
}
.side-brand .mk{ width:22px; height:22px; }
.side-brand span{ font-weight:600; font-size:14px; letter-spacing:-.02em; }
.nav-i{
  display:flex; align-items:center; gap:9px;
  padding:7.5px 10px; border-radius:9px;
  color:var(--muted); font-size:12.4px; font-weight:500; letter-spacing:-.008em;
}
.nav-i svg{ width:15px; height:15px; opacity:.75; flex:none; }
.nav-i.on{
  color:#3A2A11; font-weight:600;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,248,235,.85));
  box-shadow:0 1px 2px rgba(22,17,10,.05), 0 0 0 1px rgba(227,154,18,.16);
}
.nav-i.on svg{ opacity:1; color:var(--honey-deep); }
.side-foot{ margin-top:auto; padding:10px 8px 0; }
.plan-chip{
  border-radius:11px; padding:10px 11px;
  background:linear-gradient(150deg, rgba(255,236,199,.9), rgba(255,247,232,.6));
  border:1px solid rgba(227,154,18,.22);
  font-size:10.5px; color:#6C4A0C; line-height:1.35;
}
.plan-chip b{ display:block; font-size:11.5px; color:#3A2A11; margin-bottom:2px; }

.main{ padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.main-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.main-head h5{ margin:0; font-size:16.5px; font-weight:620; letter-spacing:-.028em; }
.main-head p{ margin:2px 0 0; font-size:11.5px; color:var(--muted-2); }
.seg{
  display:flex; padding:2.5px; gap:2px; border-radius:9px;
  background:rgba(22,17,10,.05); border:1px solid rgba(22,17,10,.04);
}
.seg span{ font-size:10.5px; padding:4px 10px; border-radius:7px; color:var(--muted); font-weight:500; }
.seg span.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(22,17,10,.08); font-weight:600; }

/* ---- kpi row ---- */
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi{
  position:relative; padding:13px 14px; border-radius:13px;
  background:linear-gradient(160deg,#fff,rgba(255,255,255,.55));
  border:1px solid rgba(22,17,10,.055);
  box-shadow:0 1px 2px rgba(22,17,10,.035);
  overflow:hidden;
}
.kpi.lit{
  background:linear-gradient(160deg, #FFF6E6, #FFFCF5);
  border-color:rgba(227,154,18,.26);
  box-shadow:0 2px 14px rgba(227,154,18,.13);
}
.kpi-l{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.kpi-v{ font-size:clamp(17px,2.1cqi,23px); font-weight:640; letter-spacing:-.035em; margin-top:5px; font-variant-numeric:tabular-nums; }
.kpi-v small{ font-size:.6em; font-weight:550; color:var(--muted-2); letter-spacing:-.01em; }
.kpi-d{ margin-top:5px; font-size:10.5px; font-weight:600; display:flex; align-items:center; gap:4px; }
.up{ color:#2F7D4F; } .down{ color:#B4553A; }
.kpi-spark{ position:absolute; right:10px; bottom:8px; width:54px; height:22px; opacity:.5; }

/* ---- panels ---- */
.grid-2{ display:grid; grid-template-columns:1.45fr 1fr; gap:12px; }
.panel{
  border-radius:13px; padding:14px;
  background:linear-gradient(165deg,#fff,rgba(255,255,255,.62));
  border:1px solid rgba(22,17,10,.055);
  box-shadow:0 1px 2px rgba(22,17,10,.035);
  min-width:0;
}
.panel-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.panel-h h6{ margin:0; font-size:12.5px; font-weight:620; letter-spacing:-.02em; }
.panel-h .tag{ font-size:10px; color:var(--muted-2); font-weight:550; }

/* chart */
.chart{ position:relative; width:100%; height:120px; }
.chart svg{ width:100%; height:100%; overflow:visible; }
.bars{ display:flex; align-items:flex-end; gap:6px; height:112px; }
.bars i{
  flex:1; border-radius:4px 4px 2px 2px; display:block;
  background:linear-gradient(180deg,#F3BC52,#DE9615);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
  transform-origin:bottom; height:var(--h,40%);
}
.bars i.ghost{ background:linear-gradient(180deg,rgba(22,17,10,.11),rgba(22,17,10,.06)); }
.x-axis{ display:flex; gap:6px; margin-top:7px; }
.x-axis span{ flex:1; text-align:center; font-size:9px; color:var(--muted-2); letter-spacing:.03em; }

/* rows / list */
.rows{ display:flex; flex-direction:column; }
.row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid rgba(22,17,10,.05);
}
.row:last-child{ border-bottom:0; padding-bottom:0; }
.row:first-child{ padding-top:0; }
.av{
  width:28px; height:28px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  font-size:10.5px; font-weight:650; letter-spacing:-.01em;
  background:linear-gradient(150deg,#FFEFD2,#FCE0AE); color:#7A5208;
  border:1px solid rgba(227,154,18,.2);
}
.av.b{ background:linear-gradient(150deg,#E8EEE6,#DCE6DA); color:#42604A; border-color:rgba(66,96,74,.18); }
.av.c{ background:linear-gradient(150deg,#EDE7F1,#E2DAE9); color:#5A4A6B; border-color:rgba(90,74,107,.16); }
.row-t{ font-size:12px; font-weight:580; letter-spacing:-.012em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-s{ font-size:10.5px; color:var(--muted-2); margin-top:1px; }
.row-v{ font-size:12px; font-weight:640; font-variant-numeric:tabular-nums; letter-spacing:-.02em; text-align:right; }
.row-v small{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.02em; margin-top:2px; }

.pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:9.5px; font-weight:650; letter-spacing:.02em;
  padding:3px 7px; border-radius:100px; white-space:nowrap;
}
.pill::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill.owed{ color:#9A5A12; background:rgba(227,154,18,.13); }
.pill.paid{ color:#2F7D4F; background:rgba(47,125,79,.12); }
.pill.part{ color:#7A5AA8; background:rgba(122,90,168,.12); }
.pill.low{ color:#B4553A; background:rgba(180,85,58,.12); }

/* progress / balance meter */
.meter{ height:5px; border-radius:100px; background:rgba(22,17,10,.07); overflow:hidden; margin-top:7px; }
.meter i{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,#EDAF33,#C97F09); width:var(--p,50%); transition:width 1.4s var(--ease-out); }
.meter.g i{ background:linear-gradient(90deg,#5FB07E,#2F7D4F); }

/* inventory cards */
.inv{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.jar{
  border-radius:12px; padding:12px; text-align:left;
  background:linear-gradient(170deg,#fff,rgba(255,252,245,.7));
  border:1px solid rgba(22,17,10,.06);
  box-shadow:0 1px 2px rgba(22,17,10,.035);
}
.jar-top{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:9px; }
.jar-ico{
  width:30px; height:34px; border-radius:6px 6px 9px 9px; position:relative; flex:none;
  background:linear-gradient(170deg, rgba(255,255,255,.85), rgba(255,255,255,.25));
  border:1px solid rgba(22,17,10,.1);
  overflow:hidden;
}
.jar-ico::before{ /* honey fill */
  content:""; position:absolute; left:0; right:0; bottom:0; height:var(--fill,60%);
  background:linear-gradient(180deg,#F0B441,#C87F09);
  transition:height 1.4s var(--ease-out);
}
.jar-ico::after{ /* lid */
  content:""; position:absolute; top:0; left:3px; right:3px; height:5px; border-radius:3px;
  background:linear-gradient(180deg,#3B2C18,#241A0E);
}
.jar-n{ font-size:11.5px; font-weight:600; letter-spacing:-.015em; }
.jar-q{ font-size:16px; font-weight:650; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-top:2px; }
.jar-q em{ font-style:normal; font-size:10px; color:var(--muted-2); font-weight:550; letter-spacing:0; }

/* toast */
.toast{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,250,240,.86));
  border:1px solid rgba(227,154,18,.28);
  box-shadow:0 10px 30px rgba(150,95,10,.14);
  backdrop-filter:blur(10px);
}
.toast .dot{ width:7px; height:7px; border-radius:50%; background:var(--honey); box-shadow:0 0 0 4px rgba(227,154,18,.16); flex:none; }
.toast b{ font-size:11.5px; font-weight:620; letter-spacing:-.015em; display:block; }
.toast span{ font-size:10.5px; color:var(--muted-2); }

/* ---- receipt ---- */
.receipt{
  width:100%; max-width:310px;
  background:linear-gradient(180deg,#FFFEFB,#FFFCF6);
  border-radius:14px 14px 4px 4px;
  border:1px solid rgba(22,17,10,.07);
  box-shadow:var(--e3);
  padding:20px 20px 12px;
  position:relative;
  font-size:11.5px;
  overflow:hidden;
}
.receipt::after{ /* torn edge */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:11px;
  background:
    radial-gradient(circle at 6px -2px, transparent 6px, var(--ivory) 6.5px) repeat-x;
  background-size:12px 12px;
}
.rc-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px dashed rgba(22,17,10,.16); }
.rc-brand{ display:flex; align-items:center; gap:7px; font-weight:640; letter-spacing:-.02em; font-size:13px; }
.rc-brand .mk{ width:18px; height:18px; }
.rc-no{ font-family:var(--mono); font-size:9.5px; color:var(--muted-2); letter-spacing:.02em; }
.rc-rows{ padding:11px 0; }
.rc-r{ display:flex; justify-content:space-between; gap:10px; padding:5px 0; color:var(--ink-soft); }
.rc-r span:first-child{ color:var(--muted); }
.rc-r b{ font-weight:600; font-variant-numeric:tabular-nums; }
.rc-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0 14px; border-top:1px dashed rgba(22,17,10,.16); margin-top:4px;
}
.rc-total span{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.rc-total b{ font-size:22px; font-weight:660; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.rc-foot{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; }
.rc-stamp{
  font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#2F7D4F; border:1.5px solid rgba(47,125,79,.42);
  padding:4px 9px; border-radius:5px; transform:rotate(-6deg);
}
.qr{ width:38px; height:38px; border-radius:5px; opacity:.85; }

/* ---- device frames ---- */
.dev{ position:relative; }
.dev-screen{ overflow:hidden; background:#fff; }

.laptop{ width:100%; max-width:760px; }
.laptop .lid{
  border-radius:16px; padding:9px;
  background:linear-gradient(160deg,#2A2318,#171209);
  box-shadow:var(--e4), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.laptop .dev-screen{ border-radius:9px; }
.laptop .base{
  height:12px; margin:0 auto; width:112%; max-width:none; transform:translateX(-5.4%);
  z-index:0;
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#D8D2C6,#A9A296 60%,#7E786C);
  box-shadow:0 16px 30px rgba(44,29,10,.24);
  position:relative;
}
.laptop .base::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:16%; height:4px; border-radius:0 0 6px 6px; background:rgba(0,0,0,.16);
}

.tablet{ width:100%; max-width:300px; }
.tablet .frame{
  border-radius:22px; padding:8px;
  background:linear-gradient(160deg,#37301F,#1A1409);
  box-shadow:var(--e4), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.tablet .dev-screen{ border-radius:15px; }

.phone{ width:100%; max-width:220px; }
.phone .frame{
  border-radius:32px; padding:7px;
  background:linear-gradient(160deg,#3A3220,#15100A);
  box-shadow:var(--e4), 0 0 0 1px rgba(255,255,255,.09) inset;
  position:relative;
}
.phone .frame::before{ /* notch */
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:34%; height:16px; border-radius:100px; background:#12100A; z-index:4;
}
.phone .dev-screen{ border-radius:26px; }

/* phone app content */
.mobi{
  background:linear-gradient(180deg,#FFFDF8,#FAF5EB);
  padding:30px 13px 13px; display:flex; flex-direction:column; gap:9px; min-height:390px;
  font-size:12px;
}
.mobi-h{ display:flex; align-items:center; justify-content:space-between; padding:6px 2px 2px; }
.mobi-h b{ font-size:15px; letter-spacing:-.03em; font-weight:640; }
.mobi-card{
  border-radius:14px; padding:13px;
  background:linear-gradient(160deg,#241B0E,#3A2A11);
  color:#FBF1DE; box-shadow:0 8px 22px rgba(44,29,10,.24);
}
.mobi-card .l{ font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; opacity:.62; font-weight:600; }
.mobi-card .v{ font-size:25px; font-weight:640; letter-spacing:-.04em; margin-top:4px; font-variant-numeric:tabular-nums; }
.mobi-card .m{ height:4px; border-radius:100px; background:rgba(255,255,255,.16); margin-top:11px; overflow:hidden; }
.mobi-card .m i{ display:block; height:100%; width:64%; border-radius:100px; background:linear-gradient(90deg,#F3BC52,#E39A12); }
.mobi-list{ background:#fff; border:1px solid rgba(22,17,10,.06); border-radius:14px; padding:11px 12px; box-shadow:0 1px 2px rgba(22,17,10,.04); }
.mobi-tabs{
  margin-top:auto; display:flex; justify-content:space-between; padding:10px 14px 4px;
  border-top:1px solid rgba(22,17,10,.06);
}
.mobi-tabs svg{ width:17px; height:17px; color:var(--muted-2); }
.mobi-tabs svg.on{ color:var(--honey-deep); }

/* container-query polish */
@container (max-width: 560px){
  .app-shell{ grid-template-columns:1fr; }
  .side{ display:none; }
  .kpis{ grid-template-columns:1fr 1fr; }
  .kpis .kpi:nth-child(3){ display:none; }
  .grid-2{ grid-template-columns:1fr; }
  .inv{ grid-template-columns:1fr 1fr; }
}