/* ===== 充电计费 · Apple 风格样式 ===== */

:root{
  --bg:        #f5f5f7;
  --card:      #ffffff;
  --text:      #1d1d1f;
  --muted:     #86868b;
  --line:      #ececef;
  --blue:      #007aff;
  --blue-soft: #e8f1ff;
  --green:     #34c759;
  --red:       #ff3b30;
  --radius:    22px;
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
  --ease:      cubic-bezier(.32,.72,0,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
              "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
  letter-spacing:.1px;
}
b{ font-weight:600; }
.tnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* 顶部毛玻璃栏 */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(245,245,247,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar-inner{
  max-width:520px; margin:0 auto;
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar-title{ font-size:19px; font-weight:700; letter-spacing:-.3px; }
.topbar-sub{ font-size:12px; color:var(--muted); margin-top:1px; }
.pill-btn{
  border:none; cursor:pointer;
  background:var(--blue); color:#fff;
  font-size:14px; font-weight:600;
  padding:8px 16px; border-radius:980px;
  transition:transform .15s var(--ease), opacity .15s;
}
.pill-btn:active{ transform:scale(.95); opacity:.85; }

/* 页面容器 */
.page{
  max-width:520px; margin:0 auto;
  padding:18px 16px 40px;
  display:flex; flex-direction:column; gap:16px;
}

/* 通用面板（白卡） */
.panel{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  animation:rise .5s var(--ease) both;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.panel-title{ font-size:17px; font-weight:700; letter-spacing:-.2px; }
.round-btn{
  width:34px; height:34px; border-radius:50%;
  border:none; cursor:pointer;
  background:#f0f0f3; color:var(--text);
  font-size:20px; line-height:1;
  transition:transform .15s var(--ease), background .15s;
}
.round-btn:active{ transform:scale(.9); background:#e4e4e9; }

/* Hero：圆形按钮 + 实时 */
.hero{ text-align:center; }
.dial-wrap{ display:flex; justify-content:center; padding:8px 0 4px; }
.dial{
  width:168px; height:168px; border-radius:50%;
  border:none; cursor:pointer; color:#fff;
  font-size:19px; font-weight:600; letter-spacing:1px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .18s var(--ease), box-shadow .18s;
  position:relative;
}
.dial:active{ transform:scale(.94); }
.dial--start{ background:linear-gradient(145deg,#42d66f,#28a745); }
.dial--stop{ background:linear-gradient(145deg,#ff5b52,#e03127); animation:breathe 2.4s ease-in-out infinite; }
.hint{ color:var(--muted); font-size:13px; margin:10px 0 0; }

/* ===== 充电中卡片 + 能量流动/电池填充动效 ===== */
.charging-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 18px 16px;
  animation:rise .5s var(--ease) both;
}
/* 能量流动条：充电时持续流动，结束即暂停变暗 */
.energy-flow{
  height:8px; border-radius:980px; overflow:hidden;
  background:var(--blue-soft); margin-bottom:16px;
}
.energy-flow .ef-bar{
  display:block; height:100%;
  background:repeating-linear-gradient(115deg,#0a84ff 0 14px,#4aa3ff 14px 28px);
  background-size:56px 100%;
  animation:eflow 1s linear infinite;
}
.charging-card:not(.charging) .energy-flow .ef-bar{ animation-play-state:paused; opacity:.3; }

/* 实时模块网格 */
.live-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.live-item{
  background:#f7f7f9; border-radius:14px; padding:12px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.live-item--wide{ grid-column:1 / -1; }
.live-label{ font-size:12px; color:var(--muted); }
.live-value{ font-size:24px; font-weight:700; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.live-value i{ font-size:13px; font-weight:500; font-style:normal; color:var(--muted); margin-left:2px; }
.live-value--green{ color:var(--green); }
.live-value--blue{ color:var(--blue); }
.lp-type{ font-size:14px; font-weight:600; color:var(--muted); margin-right:4px; }
.live-foot{
  display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center;
  margin-top:14px; font-size:12.5px; color:var(--muted);
}
.live-foot b{ color:var(--text); font-variant-numeric:tabular-nums; }

@keyframes eflow{ from{ background-position:0 0; } to{ background-position:56px 0; } }

/* 统计卡片 */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px;
  animation:rise .5s var(--ease) both;
}
.stat-label{ font-size:13px; color:var(--muted); }
.stat-value{ font-size:27px; font-weight:700; letter-spacing:-.5px; margin-top:6px; font-variant-numeric:tabular-nums; }
.stat-value i{ font-size:14px; font-weight:500; font-style:normal; color:var(--muted); margin-left:2px; }
.stat-value--blue{ color:var(--blue); }
.stat-value--green{ color:var(--green); }

/* 续航里程面板 */
.range-panel{ animation:rise .5s var(--ease) both; }
.range-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.range-item{
  background:#f7f7f9; border-radius:16px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.range-label{ font-size:13px; color:var(--muted); }
.range-value{ font-size:30px; font-weight:700; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.range-value i{ font-size:14px; font-weight:500; font-style:normal; color:var(--muted); margin-left:3px; }
.range-value--blue{ color:var(--blue); }
.range-note{ font-size:12px; color:var(--muted); margin:12px 0 0; line-height:1.5; }

/* 月历 */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-head{ margin-bottom:8px; }
.cal-head div{ text-align:center; font-size:12px; color:var(--muted); }
.cal-cell{
  aspect-ratio:1/1; border-radius:13px; background:#f4f4f6;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:14px; color:var(--text); position:relative;
  transition:background .15s, transform .15s var(--ease);
}
.cal-cell.empty{ background:transparent; }
.cal-cell.has-data{ background:var(--blue-soft); color:var(--blue); font-weight:700; cursor:pointer; }
.cal-cell.has-data:active{ transform:scale(.92); }
.cal-day{ font-size:14px; line-height:1; margin-bottom:2px; }
.cal-kwh{ font-size:9.5px; line-height:1.15; color:var(--blue); font-weight:600; }
.cal-save{ font-size:9.5px; line-height:1.15; color:var(--green); font-weight:600; }
.cal-cell.today{ box-shadow:inset 0 0 0 2px var(--blue); }
.day-detail{ font-size:13px; color:var(--muted); margin:14px 0 0; min-height:18px; }
.day-detail b{ color:var(--text); }

/* 日编辑弹窗中的记录行 */
.day-session{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#f7f7f9; border-radius:12px; padding:10px 12px; margin-bottom:8px;
  font-size:13px; line-height:1.3;
}
.day-del{
  flex:none; border:none; background:transparent; cursor:pointer;
  color:var(--red); font-size:13px; font-weight:600;
  padding:4px 8px; border-radius:8px; transition:background .15s;
}
.day-del:active{ background:rgba(255,59,48,.12); }

/* 图表 */
.chart-block{ margin-bottom:18px; }
.chart-block:last-child{ margin-bottom:0; }
.chart-label{ font-size:13px; color:var(--muted); margin-bottom:8px; }

.foot-note{ text-align:center; font-size:12px; color:var(--muted); line-height:1.7; margin:4px 0 0; }

/* ===== 电价弹窗（Apple 化） ===== */
.modal-content.apple-modal{
  border:none; border-radius:24px; overflow:hidden;
  background:var(--card);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.apple-modal-head{
  border:none; padding:20px 22px 6px;
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title{ font-size:17px; font-weight:700; }
.x-close{
  border:none; background:transparent; cursor:pointer;
  font-size:26px; line-height:1; color:var(--muted);
  width:32px; height:32px; border-radius:50%;
  transition:background .15s;
}
.x-close:active{ background:#ececef; }
.apple-modal .modal-body{ padding:8px 22px 4px; }
.apple-modal-foot{
  border:none; padding:12px 22px 20px;
  display:flex; justify-content:flex-end; gap:10px;
}
.text-btn{
  border:none; background:transparent; cursor:pointer;
  color:var(--blue); font-size:15px; font-weight:600;
  padding:8px 14px; border-radius:980px;
}
.text-btn:active{ background:rgba(0,122,255,.1); }
.solid-btn{
  border:none; cursor:pointer;
  background:var(--blue); color:#fff;
  font-size:15px; font-weight:600;
  padding:8px 20px; border-radius:980px;
  transition:transform .15s var(--ease), opacity .15s;
}
.solid-btn:active{ transform:scale(.95); opacity:.85; }

/* ===== 电价 / 时段设置弹窗 ===== */
.plan-bar{ margin-bottom:8px; }
.plan-bar .form-select{
  border:1px solid var(--line); border-radius:12px;
  padding:9px 12px; font-size:14px; font-weight:600;
  background-color:#f7f7f9;
}
.plan-bar .form-select:focus{
  border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,122,255,.15); outline:none;
}
.plan-tools{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.mini-btn{
  border:none; cursor:pointer;
  background:#f0f0f3; color:var(--text);
  font-size:12.5px; font-weight:600;
  padding:6px 11px; border-radius:980px;
  transition:transform .15s var(--ease), background .15s;
}
.mini-btn:active{ transform:scale(.94); background:#e2e2e8; }
.mini-btn.danger{ color:var(--red); background:rgba(255,59,48,.1); }
.mini-btn.danger:active{ background:rgba(255,59,48,.2); }

.plan-meta{ background:#f7f7f9; border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.mini-note{ font-size:11.5px; color:var(--muted); line-height:1.6; margin:8px 0 0; }
.plan-hint{ font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.plan-hint b{ color:var(--blue); }

/* 24 小时预览条 */
.day-bar{
  display:flex; width:100%; height:26px;
  border-radius:8px; overflow:hidden; background:#ececef;
  margin-bottom:4px;
}
.day-seg{
  height:100%; font-size:9.5px; line-height:26px;
  color:#fff; font-weight:700; text-align:center;
  overflow:hidden; white-space:nowrap;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.55);
}
.day-axis{
  display:flex; justify-content:space-between;
  font-size:10.5px; color:var(--muted); margin-bottom:14px;
}

/* 时段行 */
.period-head,
.period-row{
  display:grid;
  grid-template-columns:74px 46px minmax(56px,1fr) 84px 30px;
  gap:6px; align-items:center;
}
.period-head{ font-size:11px; color:var(--muted); margin-bottom:6px; }
.period-head span:nth-child(2){ text-align:center; }
.period-head span:nth-child(5){ text-align:center; }
.period-row{ margin-bottom:8px; }
.period-row .form-control{
  border:1px solid var(--line); border-radius:10px;
  padding:7px 8px; font-size:14px; min-width:0;
  transition:border-color .15s, box-shadow .15s;
}
.period-row .form-control:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,122,255,.15); outline:none;
}
.period-row .form-control:disabled{ background:#f0f0f3; color:var(--muted); }
.period-row .p-time{ padding:7px 4px; font-size:13px; }
.period-row .p-price{ font-variant-numeric:tabular-nums; }
.p-to{ text-align:center; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.p-del{
  border:none; background:transparent; cursor:pointer;
  color:var(--muted); font-size:19px; line-height:1;
  width:30px; height:30px; border-radius:50%;
  transition:background .15s, color .15s;
}
.p-del:active{ background:rgba(255,59,48,.12); color:var(--red); }

.add-period{
  width:100%; border:1px dashed #d2d2d7; background:transparent;
  cursor:pointer; color:var(--blue); font-size:14px; font-weight:600;
  padding:9px; border-radius:12px; margin-top:2px;
  transition:background .15s;
}
.add-period:active{ background:rgba(0,122,255,.08); }
.err-note{
  font-size:12.5px; color:var(--red); margin:8px 0 0;
  background:rgba(255,59,48,.08); border-radius:10px; padding:8px 10px;
}

/* ===== 动画 ===== */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes breathe{
  0%,100%{ box-shadow:0 10px 26px rgba(255,59,48,.22); }
  50%{ box-shadow:0 10px 34px rgba(255,59,48,.45); }
}
.stat-grid .stat:nth-child(2){ animation-delay:.05s; }
.stat-grid .stat:nth-child(3){ animation-delay:.1s; }
.stat-grid .stat:nth-child(4){ animation-delay:.15s; }