:root {
  --en-navy: #16273F; --en-blue: #2F6FE0; --en-ink: #2A3744; --en-muted: #6B7787;
  --en-line: #E4E9F0; --en-bg: #F5F7FA; --en-green: #1FA97A; --en-amber: #E0A21E; --en-red: #E8402A;
}
.en-hero { background: #fff; border-bottom: 1px solid var(--en-line); }
.en-hero-inner { max-width: 90%; margin: 0 auto; padding: 26px 0; }
.en-title { margin: 0; font-size: 24px; }
.en-subtitle { margin: 4px 0 0; color: var(--en-muted); font-size: 14px; }

.en-main { max-width: 90%; margin: 0 auto; padding: 24px 0 40px; display: grid; gap: 18px; }
.en-loading, .en-error { color: var(--en-muted); padding: 24px 0; }
.en-error { color: var(--en-red); }
.en-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; }
@media (max-width: 800px) { .en-grid { grid-template-columns: 1fr; } }
.en-card { background: #fff; border: 1px solid var(--en-line); border-radius: 14px; padding: 20px 22px; }
.en-card h2 { margin: 0 0 6px; font-size: 16px; }
.en-muted { color: var(--en-muted); font-size: 13px; line-height: 1.5; }

.en-plan-badge { display: inline-block; background: rgba(47,111,224,.12); color: var(--en-blue); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 5px 13px; margin-bottom: 10px; }
.en-plan-picker { display: block; margin-top: 14px; font-size: 12.5px; color: var(--en-muted); }
.en-plan-picker select { display: block; margin-top: 6px; border: 1px solid #C9D4E3; border-radius: 8px; padding: 9px 10px; font-size: 14px; min-width: 220px; }
.en-saved { color: var(--en-green); font-size: 12.5px; margin-left: 8px; }

.en-meters { display: grid; gap: 16px; margin-top: 8px; }
.en-meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; }
.en-state { font-size: 12px; font-weight: 600; }
.en-state.en-ok { color: var(--en-green); } .en-state.en-warn { color: #A9781A; }
.en-state.en-over { color: var(--en-red); } .en-state.en-unavailable { color: var(--en-muted); }
.en-bar { background: #EDF1F6; border-radius: 999px; height: 10px; overflow: hidden; }
.en-bar i { display: block; height: 100%; border-radius: 999px; background: var(--en-blue); }
.en-bar i.en-warn { background: var(--en-amber); } .en-bar i.en-over { background: var(--en-red); }
.en-bar i.en-ok { background: var(--en-green); } .en-bar i.en-unavailable { background: #C9D0DA; width: 0 !important; }

.en-features { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; }
.en-features li { font-size: 13.5px; } .en-features li span { display: inline-block; width: 20px; font-weight: 700; }
.en-features li.on { color: var(--en-ink); } .en-features li.on span { color: var(--en-green); }
.en-features li.off { color: var(--en-muted); }