/* EV Charging Mobile App — demo stylesheet
   Mock data only. No API calls. */

:root{
  --bg:#eef2f0;
  --card:#ffffff;
  --ink:#0e1a16;
  --muted:#6b7c76;
  --line:#e3eae7;
  --brand:#0aa06e;
  --brand-dark:#087a53;
  --brand-soft:#e6f6f0;
  --warn:#d9971f;
  --warn-soft:#fdf3e0;
  --danger:#d9482f;
  --danger-soft:#fdeceb;
  --blue:#2f6fed;
  --blue-soft:#eaf1fe;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(14,26,22,.06), 0 8px 24px rgba(14,26,22,.06);
  --font:"Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 12% -8%, #dff2ea 0%, transparent 58%),
    radial-gradient(900px 520px at 108% 8%, #e6ecff 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---------- stage ---------- */
.stage{
  display:flex;
  gap:48px;
  align-items:flex-start;
  justify-content:center;
  padding:40px 24px 64px;
  min-height:100vh;
}
.stage-note{
  max-width:340px;
  padding-top:24px;
}
.stage-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--brand-dark);
  background:var(--brand-soft);
  border:1px solid #c7e8db;
  border-radius:999px;
  padding:4px 12px;
  margin-bottom:14px;
}
.stage-note h1{
  font-size:24px;
  line-height:1.3;
  margin:0 0 12px;
  letter-spacing:-.01em;
}
.stage-note p{
  font-size:14px;
  line-height:1.7;
  color:#3f4f49;
  margin:0 0 12px;
}
.stage-warn{
  background:#fff6e5;
  border:1px solid #f0dcb4;
  border-left:4px solid var(--warn);
  border-radius:var(--radius-sm);
  padding:12px 14px !important;
  font-size:13px !important;
  color:#6b5320 !important;
}
.stage-warn b{color:#4d3a12}
.stage-list{
  list-style:none;
  padding:0;
  margin:0 0 16px;
}
.stage-list li{
  position:relative;
  padding-left:22px;
  font-size:13.5px;
  line-height:1.6;
  color:#3f4f49;
  margin-bottom:7px;
}
.stage-list li::before{
  content:"";
  position:absolute;
  left:4px;
  top:8px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.stage-hint{
  font-size:13px !important;
  color:var(--muted) !important;
  border-top:1px dashed var(--line);
  padding-top:14px !important;
}

/* ---------- phone ---------- */
.phone{flex:0 0 auto;position:sticky;top:40px}
.phone-frame{
  position:relative;
  width:392px;
  height:812px;
  background:#0b1613;
  border-radius:44px;
  padding:12px;
  box-shadow:
    0 0 0 2px #22302c,
    0 30px 60px -20px rgba(11,22,19,.55),
    0 12px 24px -12px rgba(11,22,19,.35);
  display:flex;
  flex-direction:column;
}
.phone-notch{
  position:absolute;
  top:12px;left:50%;
  transform:translateX(-50%);
  width:132px;height:26px;
  background:#0b1613;
  border-radius:0 0 16px 16px;
  z-index:6;
}
.statusbar{
  position:absolute;
  top:16px;left:28px;right:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12.5px;
  font-weight:600;
  color:#0e1a16;
  z-index:5;
  pointer-events:none;
}
.statusbar-icons{display:flex;align-items:center;gap:6px}
.sig,.wifi,.batt{display:block;background:#0e1a16;border-radius:1px}
.sig{width:14px;height:9px;clip-path:polygon(0 100%,22% 100%,22% 62%,0 62%,0 100%,30% 100%,30% 42%,52% 42%,52% 100%,60% 100%,60% 22%,82% 22%,82% 100%,90% 100%,90% 0,100% 0,100% 100%,0 100%)}
.wifi{width:12px;height:9px;clip-path:polygon(50% 100%,0 38%,16% 24%,50% 56%,84% 24%,100% 38%)}
.batt{width:20px;height:10px;border-radius:3px;border:1px solid #0e1a16;background:linear-gradient(#0e1a16,#0e1a16) left/66% 100% no-repeat;background-clip:content-box;padding:1px;box-sizing:border-box}

/* ---------- screen ---------- */
.screen{
  flex:1 1 auto;
  background:#f7f9f8;
  border-radius:32px;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  scrollbar-width:none;
  display:flex;
  flex-direction:column;
}
.screen::-webkit-scrollbar{display:none}
.screen-top{
  padding:44px 20px 14px;
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:4;
}
.screen-top.tight{padding-top:38px}
.screen-body{flex:1 1 auto;padding:16px 16px 26px}
.screen-foot{
  padding:12px 16px 20px;
  background:var(--card);
  border-top:1px solid var(--line);
  position:sticky;
  bottom:0;
  z-index:4;
}

.title{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em}
.subtitle{font-size:13px;color:var(--muted);margin:3px 0 0}
.bar{display:flex;align-items:center;gap:12px;justify-content:space-between}
.icon-btn{
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--ink);
  font-size:16px;
  display:grid;
  place-items:center;
  cursor:pointer;
  flex:0 0 auto;
}
.icon-btn:active{background:#f1f4f3}

/* ---------- generic ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}
.card.flush{padding:0;overflow:hidden}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.card-title{font-size:14.5px;font-weight:700;margin:0}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.tiny{font-size:11.5px}
.center{text-align:center}
.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.wrap{flex-wrap:wrap}
.stack>*+*{margin-top:10px}
.mt{margin-top:12px}
.mb{margin-bottom:12px}
.divider{height:1px;background:var(--line);margin:12px 0}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;
  border-radius:999px;
  padding:3px 9px;
  background:#eef2f0;color:#4a5b55;
  white-space:nowrap;
}
.badge.ok{background:var(--brand-soft);color:var(--brand-dark)}
.badge.warn{background:var(--warn-soft);color:#8a5f10}
.badge.bad{background:var(--danger-soft);color:#9c2f1c}
.badge.info{background:var(--blue-soft);color:#1e4bb8}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  border:none;
  border-radius:12px;
  padding:14px 16px;
  font-family:var(--font);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  background:#eef2f0;
  color:var(--ink);
  transition:transform .08s ease, filter .15s ease;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:active{background:var(--brand-dark)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.sm{padding:9px 12px;font-size:13px;border-radius:10px;width:auto}
.btn.link{background:transparent;color:var(--brand-dark);padding:8px;font-size:13.5px;width:auto}

.field{margin-bottom:12px}
.label{display:block;font-size:12.5px;font-weight:600;color:#41524c;margin-bottom:6px}
.input{
  width:100%;
  border:1px solid var(--line);
  background:#fbfcfc;
  border-radius:12px;
  padding:13px 14px;
  font-family:var(--font);
  font-size:15px;
  color:var(--ink);
  outline:none;
}
.input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft)}
.input::placeholder{color:#9aaba5}
.input-group{display:flex;gap:8px}
.input-group .input{flex:1 1 auto}

.seg{
  display:flex;
  gap:4px;
  background:#eef2f0;
  border-radius:12px;
  padding:4px;
  margin-bottom:14px;
}
.seg button{
  flex:1 1 0;
  border:none;
  background:transparent;
  font-family:var(--font);
  font-size:13px;
  font-weight:600;
  color:#5c6d67;
  padding:9px 6px;
  border-radius:9px;
  cursor:pointer;
}
.seg button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(14,26,22,.1)}

/* ---------- station list ---------- */
.item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  background:var(--card);
}
.item:last-child{border-bottom:none}
.item:active{background:#f6f9f8}
.thumb{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  display:grid;place-items:center;
  font-size:19px;
  flex:0 0 auto;
}
.thumb.alt{background:var(--blue-soft);color:#1e4bb8}
.thumb.gray{background:#eef2f0;color:#5c6d67}
.item-title{font-size:14.5px;font-weight:600;line-height:1.4;margin:0 0 2px}
.item-sub{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.price{font-size:14px;font-weight:700;white-space:nowrap}
.price small{font-size:11px;font-weight:500;color:var(--muted)}

/* ---------- EVSE ---------- */
.evse{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--card);
  margin-bottom:9px;
  cursor:pointer;
  text-align:left;
  width:100%;
  font-family:var(--font);
}
.evse[disabled]{opacity:.6;cursor:not-allowed}
.evse[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.evse-name{font-size:14px;font-weight:600;margin:0 0 2px;color:var(--ink)}
.evse-meta{font-size:12px;color:var(--muted);margin:0}

/* ---------- hero / wallet ---------- */
.hero{
  background:linear-gradient(135deg,var(--brand) 0%,#0b8a63 55%,#0a6f52 100%);
  border-radius:var(--radius);
  padding:18px;
  color:#fff;
  margin-bottom:14px;
  box-shadow:0 12px 26px -14px rgba(10,160,110,.7);
}
.hero .who{font-size:13px;opacity:.9}
.hero .name{font-size:19px;font-weight:700;margin:3px 0 14px}
.hero .bal{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hero .bal small{font-size:13px;font-weight:500;opacity:.85;margin-left:6px}
.hero .row.split{display:flex;gap:10px;margin-top:14px}
.hero .stat{
  flex:1 1 0;
  background:rgba(255,255,255,.16);
  border-radius:12px;
  padding:9px 11px;
}
.hero .stat b{display:block;font-size:16px;font-weight:700}
.hero .stat span{font-size:11.5px;opacity:.9}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.quick button{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:14px;
  padding:12px 4px 10px;
  font-family:var(--font);
  font-size:11px;
  font-weight:600;
  color:#3f4f49;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  line-height:1.25;
}
.quick button:active{background:#f1f4f3}
.quick .qi{font-size:19px;line-height:1}

/* ---------- payment ---------- */
.qr-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 10px 6px;
}
.qr{
  width:188px;
  height:188px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
}
.qr svg{display:block;width:100%;height:100%}
.countdown{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:15px;
}
.countdown.low{color:var(--danger)}

.summary-row{
  display:flex;justify-content:space-between;gap:10px;
  font-size:13.5px;
  padding:7px 0;
}
.summary-row span:first-child{color:var(--muted)}
.summary-row.total{
  font-size:16px;
  font-weight:700;
  border-top:1px dashed var(--line);
  margin-top:6px;
  padding-top:12px;
}

.paylist{display:grid;gap:9px}
.payopt{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--card);
  padding:13px;
  cursor:pointer;
  font-family:var(--font);
  text-align:left;
  width:100%;
}
.payopt[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.payopt b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.payopt span{font-size:12px;color:var(--muted)}
.paylogo{
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  flex:0 0 auto;letter-spacing:-.02em;
}
.paylogo.pp{background:#13306b;color:#fff}
.paylogo.card{background:#eef2f0;color:#3f4f49;font-size:17px}
.paylogo.tmn{background:#ff6d00;color:#fff;font-size:10px}

/* ---------- live charging ---------- */
.ring-wrap{display:flex;justify-content:center;padding:6px 0 2px}
.ring{position:relative;width:196px;height:196px}
.ring svg{transform:rotate(-90deg);display:block}
.ring .center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
}
.ring .big{font-size:31px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring .cap{font-size:12px;color:var(--muted)}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.metric{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 12px;
}
.metric span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.metric b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.metric b small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:2px}

.pulse{
  width:9px;height:9px;border-radius:50%;background:var(--brand);
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(10,160,110,.45)}
  50%{opacity:.75;box-shadow:0 0 0 7px rgba(10,160,110,0)}
}
.progressbar{height:7px;border-radius:99px;background:#e6ebe9;overflow:hidden}
.progressbar>i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .45s ease}

/* ---------- success ---------- */
.tick{
  width:70px;height:70px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-dark);
  display:grid;place-items:center;
  font-size:34px;
  margin:6px auto 12px;
}

/* ---------- notice strip ---------- */
.notice{
  display:flex;gap:8px;align-items:flex-start;
  background:#fff6e5;
  border:1px solid #f0dcb4;
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:12px;
  line-height:1.55;
  color:#6b5320;
  margin-bottom:12px;
}
.notice b{color:#4d3a12}

/* ---------- tabbar ---------- */
.tabbar{
  flex:0 0 auto;
  display:flex;
  background:var(--card);
  border-radius:0 0 32px 32px;
  border-top:1px solid var(--line);
  padding:7px 6px 9px;
}
.tabbar[hidden]{display:none}
.tabbar button{
  flex:1 1 0;
  border:none;background:transparent;
  font-family:var(--font);
  font-size:10.5px;
  font-weight:600;
  color:#8a9a94;
  padding:5px 2px;
  border-radius:10px;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.tabbar button[aria-current="page"]{color:var(--brand-dark)}
.tabbar .ti{font-size:19px;line-height:1}

/* ---------- sheet ---------- */
.sheet{
  position:absolute;
  inset:12px;
  border-radius:32px;
  background:rgba(11,22,19,.42);
  display:flex;
  align-items:flex-end;
  z-index:20;
}
.sheet[hidden]{display:none}
.sheet-card{
  width:100%;
  background:var(--card);
  border-radius:22px 22px 32px 32px;
  padding:18px 16px 20px;
  animation:up .22s ease;
  max-height:82%;
  overflow-y:auto;
}
@keyframes up{from{transform:translateY(28px);opacity:.4}to{transform:translateY(0);opacity:1}}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:#dde4e1;margin:0 auto 14px}
.sheet h3{font-size:16.5px;margin:0 0 6px}
.sheet p{font-size:13.5px;line-height:1.65;color:#4a5b55;margin:0 0 14px}

/* ---------- toast ---------- */
.toast{
  position:absolute;
  left:50%;
  bottom:86px;
  transform:translateX(-50%);
  background:#0b1613;
  color:#fff;
  font-size:13px;
  font-weight:500;
  padding:11px 16px;
  border-radius:12px;
  max-width:300px;
  text-align:center;
  line-height:1.5;
  z-index:30;
  animation:up .18s ease;
  box-shadow:0 10px 24px -10px rgba(11,22,19,.6);
}
.toast[hidden]{display:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .stage{
    flex-direction:column;
    align-items:center;
    gap:26px;
    padding:22px 14px 48px;
  }
  .stage-note{max-width:392px;padding-top:0}
  .stage-note h1{font-size:21px}
  .phone{position:static}
  .phone-frame{
    width:min(392px, calc(100vw - 28px));
    height:min(812px, calc(100vh - 40px));
    min-height:620px;
  }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}