* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; }
body { font-family:'Roboto',sans-serif; background:#eef1f8; color:#1c2b45; display:flex; flex-direction:column; align-items:center; }

/* IDLE */
#idlePage { display:none; flex-direction:column; align-items:center; justify-content:center; height:100dvh; gap:16px; }
.idle-logo { height:32px; opacity:.25; filter:grayscale(1); }
.idle-dot  { width:8px; height:8px; border-radius:50%; background:#c5d0e2; }

/* MAIN PAGE */
#mainPage { display:none; flex-direction:column; width:100%; max-width:420px; height:100dvh; padding:0 16px; overflow:hidden; }

/* ARC */
.soc-hero  { display:flex; justify-content:center; padding:6px 0 2px; flex-shrink:0; }
.arc-wrap  { position:relative; width:140px; height:140px; }
.arc-wrap svg { width:100%; height:100%; transform:rotate(-90deg); }
.arc-track { fill:none; stroke:#dde4f0; stroke-width:12; }
.arc-fill  { fill:none; stroke-width:12; stroke-linecap:round; stroke-dasharray:503 503; stroke-dashoffset:503; transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1),stroke .5s; }
.arc-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.soc-pct   { font-size:2rem; font-weight:700; letter-spacing:-.04em; line-height:1; }
.soc-delta { font-size:.7rem; font-weight:500; transition:color .4s; }

/* CHART */
.chart-wrap { background:#fff; border-radius:14px; box-shadow:0 1px 6px rgba(28,43,69,.07); overflow:hidden; flex:1; min-height:0; position:relative; margin:6px 0 3px; }
#chartCanvas { display:block; width:100%; height:100%; }
.chart-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.72rem; color:#c5d0e2; pointer-events:none; }

/* METRICS */
.metrics { background:#fff; border-radius:14px; box-shadow:0 1px 6px rgba(28,43,69,.07); overflow:hidden; flex:1; min-height:0; margin:3px 0 0; display:flex; flex-direction:column; }
.metric  { display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid #f0f3f9; flex:1; }
.metric:last-child { border-bottom:none; }
.metric-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.metric-icon svg { width:15px; height:15px; }
.icon-power   { background:#fff7e6; color:#f59e0b; }
.icon-voltage { background:#ede9fe; color:#7c3aed; }
.icon-current { background:#e8f0fe; color:#3b82f6; }
.icon-energy  { background:#e6f9f0; color:#16a34a; }
.icon-clock   { background:#f0f3f9; color:#64748b; }
.metric-body { flex:1; display:flex; align-items:baseline; gap:6px; }
.metric-val  { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; line-height:1; }
.metric-time { font-size:.9rem; font-variant-numeric:tabular-nums; }
.metric-unit { font-size:.6rem; color:#8fa3bf; font-weight:500; letter-spacing:.06em; }

/* FOOTER */
.footer { padding:5px 0 10px; display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.footer-upd  { font-size:.58rem; color:#c5d0e2; font-variant-numeric:tabular-nums; }
.footer-logo { height:22px; opacity:.5; transition:opacity .2s; display:block; }
.footer-logo:hover { opacity:.8; }

/* MODAL */
#finishModal { display:none; position:fixed; inset:0; background:rgba(238,241,248,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:100; align-items:center; justify-content:center; padding:24px; }
#finishModal.show { display:flex; }
.finish-card { background:#fff; border-radius:22px; padding:26px 22px 22px; width:100%; max-width:380px; box-shadow:0 12px 48px rgba(28,43,69,.14); animation:slideUp .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.finish-check { width:54px; height:54px; background:#dcfce7; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.finish-check svg { width:26px; height:26px; color:#16a34a; }
.finish-energy { text-align:center; margin-bottom:18px; }
.finish-energy-val { font-size:3rem; font-weight:700; letter-spacing:-.04em; color:#1c2b45; line-height:1; }
.finish-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#eef1f8; border-radius:12px; overflow:hidden; }
.finish-stat { background:#fff; padding:12px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.finish-stat svg { width:16px; height:16px; color:#8fa3bf; }
.finish-stat-val  { font-size:.9rem; font-weight:700; }
.finish-stat-unit { font-size:.58rem; color:#8fa3bf; font-weight:500; letter-spacing:.06em; }
.finish-unavail { display:flex; flex-direction:column; align-items:center; gap:12px; padding:8px 0; }
.finish-unavail svg  { width:36px; height:36px; color:#c5d0e2; }
.finish-unavail-text { font-size:.88rem; color:#94a3b8; font-weight:500; text-align:center; }