.hmp-plan-page{width:min(100%,880px);margin:0 auto;display:grid;gap:14px;color:#edf5ff}
.hmp-plan-hero{display:grid;grid-template-columns:1fr auto;gap:16px;padding:22px;border:1px solid rgba(101,118,255,.28);border-radius:20px;background:radial-gradient(circle at 90% 5%,rgba(105,92,255,.25),transparent 35%),linear-gradient(145deg,#172b49,#0b1a2f);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.hmp-plan-hero small,.hmp-plan-hero p{color:#a6b7ca}
.hmp-plan-hero h2{margin:4px 0;font-size:clamp(36px,11vw,58px);letter-spacing:-2px}
.hmp-plan-pill{align-self:start;padding:8px 12px;border-radius:999px;background:rgba(51,209,128,.17);color:#a3f6c6;font-weight:700}
.hmp-plan-hero footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid rgba(148,163,184,.14)}
.hmp-plan-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hmp-plan-metric{display:flex;min-width:0;gap:10px;padding:14px;border:1px solid rgba(148,163,184,.16);border-radius:16px;background:rgba(15,32,54,.9)}
.hmp-plan-metric>span{font-size:20px}
.hmp-plan-metric div{display:grid;min-width:0}
.hmp-plan-metric small,.hmp-plan-metric em{color:#a0b2c8;font-size:11px;font-style:normal}
.hmp-plan-metric b{margin:2px 0;overflow:hidden;color:#fff;font-size:16px;text-overflow:ellipsis;white-space:nowrap}
.hmp-plan-owner-note{padding:13px 15px;border:1px solid rgba(91,112,244,.28);border-radius:15px;background:rgba(91,112,244,.11);color:#d5dcff}
.hmp-plan-section{padding:18px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:linear-gradient(145deg,rgba(17,34,57,.95),rgba(9,24,42,.98))}
.hmp-plan-section h3{margin:0 0 14px}
.hmp-plan-section ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hmp-plan-section li{display:flex;gap:10px;color:#e5eef9}
.hmp-plan-section li span{color:#5ee5a0}
.hmp-plan-limit-list{display:grid;gap:8px}
.hmp-plan-limit-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(148,163,184,.12)}
.hmp-plan-limit-list>div:last-child{border-bottom:0}
.hmp-plan-limit-list span{color:#acbbcd}
.hmp-plan-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hmp-plan-commercial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.hmp-plan-commercial-grid>div{display:grid;gap:5px;padding:13px;border-radius:14px;background:rgba(148,163,184,.08)}
.hmp-plan-commercial-grid small{color:#a6b6c9}
.hmp-screen-state{min-height:260px;display:grid;place-items:center;text-align:center;padding:28px 18px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:linear-gradient(145deg,rgba(17,34,57,.96),rgba(8,22,39,.98));color:#eaf2ff}
.hmp-screen-state>p{max-width:460px;color:#a6b7cb}
.hmp-state-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(57,210,128,.13);color:#43df91;font-size:24px;font-weight:800}
.hmp-screen-loading{display:block}
.hmp-state-skeleton{height:86px;margin:12px 0;border-radius:16px;background:linear-gradient(90deg,rgba(148,163,184,.08),rgba(148,163,184,.18),rgba(148,163,184,.08));background-size:220% 100%;animation:hmp-shimmer 1.2s linear infinite}
@keyframes hmp-shimmer{to{background-position:-220% 0}}
@media(max-width:680px){
  .hmp-plan-metrics{grid-template-columns:1fr 1fr}
  .hmp-plan-commercial-grid{grid-template-columns:1fr}
  .hmp-plan-section-title{align-items:stretch;flex-direction:column}
  .hmp-plan-section-title button{width:100%}
}
@media(max-width:370px){
  .hmp-plan-metrics{grid-template-columns:1fr}
  .hmp-plan-hero{padding:18px}
  .hmp-plan-hero footer{flex-direction:column;gap:4px}
}
.hmp-plan-page button:focus-visible{outline:3px solid rgba(116,144,255,.75);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hmp-state-skeleton{animation:none}}