.energy-page { position: fixed; z-index: 9980; inset: 0 50% 76px auto; display: none; width: min(100%,430px); transform: translateX(50%); overflow-y: auto; color: #17242b; background: #f1f6f4; font-family: Arial,"Microsoft YaHei",sans-serif; }.energy-page.is-open { display: block; }.energy-page-inner { min-height: 100%; padding: 14px 13px 28px; }.energy-card { border-radius: 25px; padding: 19px 17px 22px; background: #fff; box-shadow: 0 8px 30px rgba(24,72,54,.08); }.energy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.energy-eyebrow { margin: 0 0 4px; color: #7b898d; font-size: 11px; }.energy-head h1 { margin: 0; color: #101d23; font-size: 27px; line-height: 1.15; }.energy-subtitle { margin: 7px 0 0; color: #8a989d; font-size: 14px; }.energy-free { flex: none; border: 1px solid #72e2b8; border-radius: 999px; padding: 10px 13px; color: #00ad68; background: #f0fff9; font-size: 14px; font-weight: 800; }.energy-alert { display: grid; grid-template-columns: 48px 1fr; gap: 12px; margin: 20px 0 24px; border: 1.5px solid #f2bd40; border-radius: 19px; padding: 14px; color: #7b5315; background: #fffaf0; }.energy-clock { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: #fff; background: #ffbc43; font-size: 24px; }.energy-alert strong { display: block; margin-bottom: 5px; font-size: 14px; }.energy-alert p { margin: 0; color: #916d33; font-size: 12px; line-height: 1.55; }.energy-label-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 9px; }.energy-label-row label { font-size: 15px; font-weight: 800; }.energy-book { border: 0; color: #00ad68; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }.energy-input-wrap { display: grid; grid-template-columns: 47px 1fr auto; min-height: 58px; overflow: hidden; border: 1px solid #dce4e1; border-radius: 17px; background: #fff; box-shadow: 0 4px 14px rgba(30,66,53,.05); }.energy-input-icon { display: grid; place-items: center; color: #00ae69; background: #effbf6; font-size: 23px; font-weight: 700; }.energy-input-icon.purple { color: #7764d9; background: #f2f0ff; }.energy-input-wrap input { min-width: 0; border: 0; padding: 0 10px; color: #1d2d33; background: transparent; outline: none; font-size: 14px; }.energy-input-wrap input::placeholder { color: #a4afb2; }.energy-network { align-self: center; margin-right: 9px; border-radius: 999px; padding: 9px 11px; color: #008c56; background: #eafaf3; font-size: 12px; font-weight: 800; }.energy-helper { color: #9aa7ab; font-size: 11px; }.energy-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }.energy-plan { position: relative; min-height: 157px; border: 2px solid #dfe4e2; border-radius: 20px; padding: 17px 14px; text-align: left; color: #19262c; background: #fff; cursor: pointer; }.energy-plan.is-selected { border-color: #00b66d; background: #f0fff8; }.energy-plan-check { position: absolute; top: 14px; right: 13px; display: none; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #00b66d; }.energy-plan.is-selected .energy-plan-check { display: grid; }.energy-plan-title { display: block; font-size: 24px; font-weight: 900; }.energy-plan-energy { display: block; margin-top: 16px; font-family: Georgia,serif; font-size: 15px; font-weight: 700; }.energy-plan-note { display: block; margin-top: 7px; color: #849297; font-size: 11px; }.energy-plan-price { display: block; margin-top: 18px; color: #009f61; font-size: 15px; font-weight: 900; }.energy-summary { display: flex; justify-content: space-between; margin: 17px 2px; color: #89979b; font-size: 12px; }.energy-summary b { color: #00a962; }.energy-submit { width: 100%; min-height: 54px; border: 0; border-radius: 17px; color: #fff; background: linear-gradient(135deg,#5ed9aa,#00b96e); box-shadow: 0 8px 22px rgba(0,178,105,.2); font-size: 17px; font-weight: 900; cursor: pointer; }.energy-status { min-height: 19px; margin: 10px 2px 0; color: #748489; font-size: 12px; line-height: 1.5; }.energy-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; border: 0; color: #52666d; background: transparent; font-weight: 700; cursor: pointer; }
@media (max-width:350px) { .energy-card { padding-inline: 13px; }.energy-plan { padding-inline: 10px; }.energy-plan-title { font-size: 21px; } }