.add-modules-demo {
  position: absolute;
  top: 102px;
  left: 0;
  width: calc(100% - 135px - 368px);
  height: 572px;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.charge-symbols { position: absolute; }
.charge-app {
  --charge-control-radius: 100px;
  --charge-ink: #282828;
  --charge-muted: #62666a;
  --charge-accent: #12CE5D;
  --charge-canvas: #ECEFF0;
  --charge-surface: #fff;
  --charge-soft: #E7FAEF;
  --charge-accent-ink: #09672F;
  --charge-track: #C6F3D8;
  --charge-line: #dce0e2;
  --charge-dark: #020000;
  --charge-on-dark: #ECEFF0;
  --charge-on-dark-muted: #bbc0c3;
  position: absolute;
  top: 0;
  width: 450px;
  height: 918.5px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #9ECDCD 0%, #FFF 100%);
  color: var(--charge-ink);
  font: 18px/1.4 Figtree, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  transform-origin: top left;
}
.charge-app--primary { left: calc(50% - 225px); }
.charge-app--secondary { left: calc(50% + 20px); opacity: 0; transform: scale(calc(242 / 450)); }
.charge-app strong { font-weight: 600; }
.charge-app small { display: block; font-size: 16px; font-weight: 400; color: var(--charge-muted); }
.charge-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.charge-status-space { height: 39px; }
.charge-header { position: absolute; top: 39px; left: 24px; right: 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.charge-wordmark { display: flex; align-items: baseline; font-size: 36px; font-weight: 700; letter-spacing: -.055em; }
.charge-wordmark > span { color: var(--charge-ink); }
.charge-wordmark > i { width: 7px; height: 7px; background: var(--charge-accent); border-radius: 50%; margin-left: 4px; }
.charge-location { display: flex; align-items: center; gap: 7px; font-size: 18px; }
.charge-location > .charge-icon { width: 20px; height: 20px; }
.charge-battery { position: absolute; top: 111px; left: 24px; right: 24px; height: 211px; padding: 22px 24px; border-radius: 24px; color: var(--charge-on-dark); background: var(--charge-dark); }
.charge-battery__top { display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.charge-connected { display: flex; align-items: center; gap: 7px; color: var(--charge-accent); font-size: 14px; }
.charge-connected i, .charge-station__footer i, .charge-availability__heading i { display: inline-block; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.charge-battery__numbers { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.charge-battery__numbers strong { font-size: 70px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.charge-battery__numbers strong span { font-size: 28px; margin-left: 3px; letter-spacing: 0; }
.charge-battery__numbers .charge-range strong { font-size: 28px; letter-spacing: -.015em; }
.charge-battery__numbers .charge-range strong span { font-size: 18px; }
.charge-range small { color: var(--charge-on-dark-muted); margin-top: 8px; font-size: 14px; }
.charge-battery__bar { height: 8px; margin-top: 17px; border-radius: 4px; background: #454545; overflow: hidden; }
.charge-battery__bar span { display: block; height: 100%; width: 68%; background: var(--charge-accent); border-radius: inherit; }
.charge-battery__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 14px; color: var(--charge-on-dark-muted); }
.charge-battery__bottom .charge-icon { width: 18px; height: 18px; color: var(--charge-accent); }
.charge-nearby { position: absolute; top: 349.2px; left: 24px; right: 24px; }
.charge-section-title { display: flex; align-items: center; justify-content: space-between; line-height: 30px; }
.charge-section-title > strong { font-size: 24px; letter-spacing: -.025em; }
.charge-section-title > span { font-size: 16px; color: var(--charge-muted); }
.charge-station { margin-top: 12px; background: var(--charge-surface); border-radius: 22px; padding: 18px; }
.charge-station__head { display: flex; align-items: center; gap: 14px; }
.charge-station__head > .charge-icon { margin-left: auto; width: 20px; }
.charge-station__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--charge-soft); color: var(--charge-accent-ink); }
.charge-station__icon .charge-icon { width: 30px; height: 30px; }
.charge-station strong { font-size: 20px; }
.charge-station small { margin-top: 4px; font-size: 14px; }
.charge-station__tags { display: flex; gap: 8px; margin-top: 12px; font-size: 14px; }
.charge-station__tags > span { padding: 5px 9px; border-radius: var(--charge-control-radius); background: var(--charge-canvas); color: var(--charge-muted); }
.charge-station__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--charge-line); }
.charge-station__footer > span { font-size: 16px; color: var(--charge-ink); }
.charge-station__footer i { margin-right: 7px; }
.charge-station__footer strong { font-size: 25px; }
.charge-station__footer small { display: inline; font-size: 14px; }
.charge-explore { position: absolute; top: 598px; left: 24px; right: 24px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--charge-line); padding-top: 16px; }
.charge-explore > .charge-icon:first-child { width: 36px; height: 36px; color: var(--charge-ink); }
.charge-explore > .charge-icon:last-child { margin-left: auto; }
.charge-explore strong { font-size: 20px; }
.charge-explore small { margin-top: 6px; font-size: 16px; }
.charge-addition { position: absolute; left: 24px; right: 24px; overflow: hidden; border-radius: 22px; background: var(--charge-surface); isolation: isolate; opacity: 0; }
.charge-addition--booking { top: 338px; height: 200px; }
.charge-addition--tariff { top: 408px; height: 232px; }
.charge-addition .visual-demo__result { isolation: isolate; }
.charge-addition .visual-demo__result-color-fill { background: #12AF77; }
.charge-module-content { position: absolute; inset: 0; background: var(--charge-surface); }
.charge-booking { height: 100%; padding: 18px 22px; }
.charge-booking > p { margin: 4px 0 12px; font-size: 16px; color: var(--charge-muted); }
.charge-times { display: flex; gap: 8px; }
.charge-times > span { flex: 1; min-width: 0; display: grid; place-items: center; height: 34px; border: 1px solid var(--charge-line); border-radius: var(--charge-control-radius); font-size: 14px; font-weight: 500; white-space: nowrap; }
.charge-times > .is-selected { background: var(--charge-soft); border-color: var(--charge-accent); color: var(--charge-ink); }
.charge-booking__action { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin-top: 12px; background: var(--charge-accent); border-radius: var(--charge-control-radius); font-size: 16px; }
.charge-booking__action > .charge-icon { width: 18px; height: 18px; }
.charge-booking__action > .charge-icon:last-child { margin-left: auto; }
.charge-tabbar { position: absolute; bottom: 24px; left: 20px; right: 20px; height: 64px; display: flex; align-items: center; justify-content: space-around; padding: 0 8px; border-top: 0; background: transparent; }
.charge-tabbar > span { display: flex; flex-direction: column; align-items: center; color: var(--charge-muted); }
.charge-tabbar small { font-size: 13px; margin-top: 5px; color: inherit; }
.charge-tabbar .is-current { color: var(--charge-ink); }
.charge-tabbar > .charge-tabbar__scan { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--charge-control-radius); color: var(--charge-ink); background: var(--charge-accent); }
.charge-tabbar__scan .charge-icon { width: 28px; height: 28px; }
.charge-detail-nav { position: absolute; top: 39px; left: 24px; right: 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; font-size: 18px; }
.charge-detail-nav > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--charge-control-radius); background: var(--charge-surface); }
.charge-detail-title { position: absolute; top: 117px; left: 24px; right: 24px; }
.charge-detail-title h2 { margin: 0; font-size: 32px; line-height: 1.25; letter-spacing: -.035em; font-weight: 600; }
.charge-detail-title p { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--charge-muted); font-size: 16px; }
.charge-detail-title .charge-icon { width: 18px; height: 18px; }
.charge-availability { position: absolute; top: 219px; left: 24px; right: 24px; height: 173px; background: var(--charge-soft); border-radius: 22px; padding: 20px 22px; }
.charge-availability__heading { display: flex; justify-content: space-between; font-size: 14px; color: var(--charge-accent-ink); }
.charge-availability__heading i { margin-right: 7px; }
.charge-availability__numbers { display: flex; justify-content: space-between; margin-top: 16px; }
.charge-availability__numbers strong { font-size: 42px; letter-spacing: -.025em; line-height: 1; }
.charge-availability__numbers strong span { font-size: 20px; }
.charge-availability__numbers small { margin-top: 6px; font-size: 14px; color: var(--charge-muted); }
.charge-ports { display: flex; gap: 6px; margin-top: 17px; }
.charge-ports i { flex: 1; height: 8px; border-radius: 3px; background: var(--charge-track); }
.charge-ports i:nth-child(-n+6) { background: var(--charge-accent); }
.charge-station-info { position: absolute; top: 408px; left: 24px; right: 24px; }
.charge-station-info p { display: flex; justify-content: space-between; margin: 16px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--charge-line); font-size: 18px; }
.charge-station-info p > span { color: var(--charge-muted); }
.charge-station-info p > strong { font-weight: 400; }
.charge-detail-note { position: absolute; top: 566px; left: 24px; right: 24px; display: flex; align-items: center; gap: 14px; border-radius: 18px; padding: 20px; background: var(--charge-soft); }
.charge-detail-note .charge-icon { width: 30px; height: 30px; }
.charge-detail-note small { margin-top: 5px; font-size: 14px; }
.charge-tariff { height: 100%; padding: 18px 22px; }
.charge-tariff__price { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.charge-tariff__price > strong { font-size: 30px; letter-spacing: -.025em; }
.charge-tariff__price > strong > span { font-size: 16px; font-weight: 400; color: var(--charge-muted); }
.charge-tariff__price > span { font-size: 14px; color: var(--charge-accent-ink); }
.charge-tariff__periods { display: flex; gap: 10px; margin-top: 15px; }
.charge-tariff__periods > div { display: flex; flex: 1; flex-direction: column; gap: 5px; color: var(--charge-muted); }
.charge-tariff__periods i { height: 5px; background: var(--charge-line); border-radius: 4px; margin-bottom: 3px; }
.charge-tariff__periods strong { font-size: 18px; }
.charge-tariff__periods span { font-size: 13px; letter-spacing: .01em; }
.charge-tariff__periods .is-current { color: var(--charge-ink); }
.charge-tariff__periods .is-current i { background: var(--charge-accent); }
.charge-tariff > p { margin: 13px 0 0; font-size: 14px; color: var(--charge-muted); }
.charge-detail-action { position: absolute; bottom: 43px; left: 24px; right: 24px; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px; background: var(--charge-accent); border-radius: var(--charge-control-radius); font-size: 20px; }
.charge-detail-action > span { margin-left: auto; font-size: 16px; }

.charge-icon--chevron, .charge-icon--inline { width: 16px; height: 16px; }
.charge-section-title > span { display: inline-flex; align-items: center; gap: 6px; }