/* 太陽能充電站 — LIFF 頁面共用樣式（全螢幕，於 LINE 內顯示） */
:root{
  --bg:#F6F0E2; --card:#FFFFFF; --ink:#20292F; --muted:#A9A294; --soft:#EFEADD;
  --blue:#BBCEE2; --blue-d:#7E9CBD;
  --ok:#54A66E; --ch:#7E9CBD; --mt:#D2A24E; --off:#B5B0A6;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
  font-family:'PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;}
body{background:var(--bg);color:var(--ink);min-height:100vh;}
.wrap{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}

/* header */
.page-hd{height:54px;flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;
  background:#fff;border-bottom:1px solid #ECECEC;position:sticky;top:0;z-index:10;}
.back{width:38px;height:38px;border:none;background:none;font-size:24px;color:var(--ink);cursor:pointer;}
.page-hd .pt{font-size:16px;font-weight:700;}
.demo-tag{margin-left:auto;font-size:12px;color:#B08900;background:#FFF6D6;padding:4px 11px;border-radius:20px;}
.page-bd{flex:1;overflow-y:auto;padding:18px;}
.page-bd.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}

/* hero */
.hero{border-radius:24px;padding:22px;color:var(--ink);position:relative;overflow:hidden;
  background:var(--blue);box-shadow:0 8px 20px rgba(60,50,30,.10);}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.30);}
.srow{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;}
.pdot{width:9px;height:9px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 0 rgba(32,41,47,.45);animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(32,41,47,.4)}70%{box-shadow:0 0 0 10px rgba(32,41,47,0)}100%{box-shadow:0 0 0 0 rgba(32,41,47,0)}}
.pile{margin-left:auto;font-size:13px;background:rgba(0,0,0,.07);padding:5px 12px;border-radius:20px;}
.pct{font-size:60px;font-weight:800;line-height:1;margin:12px 0 3px;}.pct small{font-size:24px;}
.meta{font-size:14px;opacity:.75;}
.pbar{height:9px;border-radius:6px;background:rgba(0,0,0,.10);margin-top:14px;overflow:hidden;}
.pbar>i{display:block;height:100%;background:var(--ink);border-radius:6px;transition:width .4s;}

/* stats */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px;}
.stat{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 5px 14px rgba(60,50,30,.05);}
.k{font-size:13px;color:var(--muted);}.v{font-size:24px;font-weight:800;margin-top:6px;}
.v small{font-size:13px;color:var(--muted);font-weight:700;}

/* buttons */
.btn{display:block;width:100%;text-align:center;margin-top:16px;background:var(--blue);color:var(--ink);
  border:none;border-radius:14px;padding:15px;font-size:16px;font-weight:800;cursor:pointer;}
.btn.dark{background:var(--ink);color:#fff;}

/* summary card */
.sumcard{background:var(--card);border-radius:16px;padding:16px 18px;box-shadow:0 5px 14px rgba(60,50,30,.05);margin-bottom:14px;}
.sumcard .big{font-size:22px;font-weight:800;}.sumcard .sm{font-size:13px;color:var(--muted);margin-top:3px;}

/* status list */
.row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;
  padding:15px 16px;margin-bottom:10px;box-shadow:0 4px 12px rgba(60,50,30,.04);}
.row .nm{font-size:17px;font-weight:800;}
.row .ty{font-size:12px;color:var(--muted);margin-top:2px;}
.row .st{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;}
.sdot{width:10px;height:10px;border-radius:50%;}
.d-ok{background:var(--ok);}.d-ch{background:var(--ch);}.d-mt{background:var(--mt);}.d-off{background:var(--off);}

/* scan */
.scanbox{margin:20px auto;width:230px;height:230px;border-radius:20px;background:#11150F;position:relative;overflow:hidden;}
.corner{position:absolute;width:34px;height:34px;border:4px solid #fff;}
.c1{top:16px;left:16px;border-right:none;border-bottom:none;border-radius:8px 0 0 0;}
.c2{top:16px;right:16px;border-left:none;border-bottom:none;border-radius:0 8px 0 0;}
.c3{bottom:16px;left:16px;border-right:none;border-top:none;border-radius:0 0 0 8px;}
.c4{bottom:16px;right:16px;border-left:none;border-top:none;border-radius:0 0 8px 0;}
.scanline{position:absolute;left:16px;right:16px;height:3px;background:var(--blue);box-shadow:0 0 10px var(--blue);animation:scan 2s ease-in-out infinite;}
@keyframes scan{0%{top:24px}50%{top:202px}100%{top:24px}}

/* contact */
.info{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 5px 14px rgba(60,50,30,.05);margin-bottom:14px;}
.info .ln{display:flex;gap:10px;padding:9px 0;font-size:14px;border-bottom:1px solid #F0EBDD;}
.info .ln:last-child{border-bottom:none;}
.info .ln span{color:var(--muted);width:64px;flex:none;}
.faq{background:var(--card);border-radius:14px;padding:14px 16px;margin-bottom:9px;font-size:14px;box-shadow:0 3px 10px rgba(60,50,30,.04);}
.faq .q{font-weight:800;}.faq .a{color:var(--muted);margin-top:5px;line-height:1.6;}
.lbl{font-size:13px;color:var(--muted);font-weight:700;margin:4px 2px 8px;}

.ok-banner{background:#EEF3F8;border:1px solid var(--blue-d);border-radius:14px;padding:16px;
  text-align:center;font-weight:800;color:var(--ink);margin-top:16px;}
.foot{text-align:center;font-size:12px;color:var(--muted);margin-top:16px;line-height:1.7;}