:root{
  --card-bg:#14151a;
  --card-stroke:#2b2e36;
  --ok:#21c07a;
  --warn:#f5a524;
  --bad:#e5484d;
}

.ph-wrap{max-width:1200px;margin-inline:auto;padding:20px 14px}
.ph-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.ph-title{margin:0;font-family:"Cinzel Decorative",system-ui,sans-serif;font-size:clamp(22px,2.6vw,32px)}
.ph-title span{opacity:.85}
.ph-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--card-stroke);background:#181a21;padding:8px 12px;border-radius:12px;text-decoration:none;color:inherit}

.ph-pills{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.ph-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--card-stroke);border-radius:999px;background:#14151a}
.ph-pill.dim{opacity:.7}
.ph-pill b{font-variant-numeric:tabular-nums}

.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.ph-card{position:relative;background:var(--card-bg);border:1px solid var(--card-stroke);border-radius:14px;padding:16px;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.ph-ribbon{position:absolute;inset-inline-start:-8px;inset-block-start:12px;padding:4px 12px;border-start-end-radius:10px;border-end-end-radius:10px;color:#0f1014;background:#343744;font-weight:800;box-shadow:0 8px 16px rgba(0,0,0,.25)}
.ph-r1{background:linear-gradient(135deg,#ffd54d,#ff9f1a)}
.ph-r2{background:linear-gradient(135deg,#d0d5dd,#9aa1ad)}
.ph-r3{background:linear-gradient(135deg,#ffb199,#ff0844)}

.ph-row{display:flex;gap:10px}
.ph-row.ai{align-items:center}
.ph-row.sb{justify-content:space-between}
.ph-name{font-weight:800;font-size:1.06rem}
.ph-alias{opacity:.75}
.ph-meta{opacity:.85;margin-top:4px}
.ph-hero{opacity:.9;margin:6px 0 10px}

.ph-stat{margin:8px 0}
.ph-label{min-width:82px;opacity:.9}
.ph-bar{display:flex;gap:4px;flex:1}
.ph-bar.sm .seg{height:7px}
.seg{position:relative;flex:1;height:9px;border-radius:8px;background:#23262f;border:1px solid #2f3440;overflow:hidden}
.seg.full{background:linear-gradient(180deg,#6ea8ff,#3a63d9)}
.seg.half::after{content:"";position:absolute;inset:0;width:50%;background:linear-gradient(180deg,#6ea8ff,#3a63d9)}
.ph-val{font-variant-numeric:tabular-nums}

.ph-over{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px dashed var(--card-stroke)}
.ph-badge{font-weight:800;padding:6px 10px;border-radius:10px;border:1px solid var(--card-stroke);background:#181a21}
.ph-badge.ok{border-color:#1f7a55;color:var(--ok)}
.ph-badge.warn{border-color:#7a5b1f;color:var(--warn)}
.ph-badge.bad{border-color:#7a1f25;color:var(--bad)}

.ph-modes{margin-top:6px}
.mode-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.mode-label{min-width:88px;opacity:.85}

@media (max-width:480px){
  .ph-title{font-size:20px}
  .ph-label{min-width:68px}
  .mode-label{min-width:74px}
}