/* charge module – charge / summary / receipt */

/* Energy life – car-top.png + % fill layer */
.elife-car{
  position:relative;
  width:100%;
  margin:12px 0 8px;
  border-radius:18px;
  overflow:hidden;
  background:#05070c;
  aspect-ratio:8/5;
}
.elife-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  mix-blend-mode:lighten;
  pointer-events:none;
  user-select:none;
}
.elife-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.elife-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--p,20%);
  background:linear-gradient(90deg,#1f6bffe6 0%,#1f6bff99 70%,#1f6bff33 100%);
  mix-blend-mode:hard-light;
  transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.elife-pct{
  position:absolute;
  top:50%;
  left:max(22px,calc(var(--p,20%) * .48));
  transform:translate(-50%,-50%);
  min-width:44px;
  height:28px;
  padding:0 10px;
  border-radius:14px;
  background:rgba(31,107,255,.92);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(15,40,90,.35);
  transition:left .35s cubic-bezier(.2,.8,.2,1);
  white-space:nowrap;
  z-index:3;
}

.seg{display:flex;background:#fff;border-radius:16px;padding:4px}
.seg button{flex:1;height:42px;border-radius:13px;font-weight:600;font-size:13px;color:#9aa3b0;transition:.3s;display:flex;gap:6px;align-items:center;justify-content:center}
.seg .a{background:var(--blue);color:#fff}
.stat{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin:10px 0}
.stat b{font-size:22px;font-weight:700}.stat b small{font-size:12px;font-weight:500;color:var(--mut)}
.stat div:first-child{border-right:1px solid #e8ebf0}
.lim{background:var(--surf);border-radius:14px;padding:13px 14px;display:flex;justify-content:space-between;font-size:13px;font-weight:500;width:100%}
/* charge screen: scroll content separate from modal */
#charge{overflow:hidden}
.charge-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.charge-scroll::-webkit-scrollbar{display:none}

/* charging modal — fully off-screen until Start charging */
.sheet{
  position:absolute;left:0;right:0;bottom:0;
  top:calc(48px + env(safe-area-inset-top,0px));
  background:#fff;border-radius:0;z-index:70;
  transform:translateY(110%);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s;
  padding:14px 20px calc(28px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;
  visibility:hidden;pointer-events:none;
}
.sheet.on{
  transform:none;visibility:visible;pointer-events:auto;transition-delay:0s;
}
.scrim{
  position:absolute;inset:0;background:#0006;z-index:65;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s,visibility 0s .4s;
}
.scrim.on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.ring{width:190px;height:190px;position:relative;margin:70px 0 24px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .c b{font-size:50px;font-weight:700;line-height:1}.ring .c b small{font-size:20px;color:var(--blue)}
.glow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,#1f6bff33 55%,transparent 70%);animation:pl 2.2s ease-in-out infinite}
@keyframes pl{50%{transform:scale(1.07);opacity:.6}}
.pm{display:flex;align-items:center;gap:12px;padding:13px 0;width:100%;text-align:left;border-bottom:1px solid #eef0f4}
.pm:last-child{border:0}.pm .tag{width:42px;height:28px;border-radius:7px;background:#f2f4f8;display:grid;place-items:center;font:800 10px inherit}
.rd{margin-left:auto;width:22px;height:22px;border-radius:50%;background:#e4e7ec;transition:.25s}
.pm.on .rd{background:#fff;border:6px solid var(--blue)}
.foot{position:absolute;bottom:0;left:0;right:0;background:#fff;padding:14px 18px calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;z-index:30;border-radius:0}
.foot .btn{width:auto;padding:0 28px}
.rec{background:#fbfaf6;color:#222;width:290px;margin:0 auto;padding:18px 16px 26px;font:11px/1.55 'Courier New',monospace;transform:translateY(-110%);transition:transform 2.4s steps(40,end);position:relative;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px))}
.on .rec.pr{transform:none}
.rec div.r{display:flex;justify-content:space-between}
.rec hr{border:0;border-top:1px dashed #999;margin:7px 0}
.stamp{position:absolute;right:104px;top:408px;border:2px solid #3b82f6;color:#3b82f6;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font:700 11px inherit;transform:rotate(-14deg) scale(3);opacity:0;transition:.4s 2.6s}
.on .stamp{transform:rotate(-14deg);opacity:.85}
.bc{height:34px;margin:8px 0;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px)}