/* Fázisszimmetria és fázistérkép a terheléskezelés oldalon. */
.phase-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin:10px 0}
.phase-panel>div{padding:11px 12px;border:1px solid #dce5ee;border-radius:9px;background:#f8fafc}
.phase-panel header{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.phase-panel header b{font-size:13px}
.phase-sub{color:#7b8794;font-size:11px}

/* A jelzés színe a szórásból jön: zöld, amíg nincs mit tenni. */
.phase-badge{margin-left:auto;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.phase-symmetry.even{border-left:3px solid #0a9e67}
.phase-symmetry.even .phase-badge{background:#dff5ea;color:#08704a}
.phase-symmetry.mild{border-left:3px solid #d18c00}
.phase-symmetry.mild .phase-badge{background:#fdf0d5;color:#8a5c00}
.phase-symmetry.bad{border-left:3px solid #c6292d}
.phase-symmetry.bad .phase-badge{background:#fbe3e4;color:#96201f}

.phase-bar{display:grid;grid-template-columns:24px 1fr 56px;align-items:center;gap:7px;margin:3px 0;font-size:11px}
.phase-bar i{font-style:normal;color:#55707b;font-weight:700}
.phase-bar span{height:9px;border-radius:5px;background:#e6edf3;overflow:hidden}
.phase-bar span b{display:block;height:100%;background:#0fa7a3;border-radius:5px}
.phase-bar.is-peak span b{background:#d18c00}
.phase-symmetry.bad .phase-bar.is-peak span b{background:#c6292d}
.phase-bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:#37474f}

.phase-panel small{display:block;color:#657587;font-size:11px;margin-top:4px}
.phase-lost{color:#8a5c00}
.phase-ok{color:#08704a}

.phase-map-row{border-top:1px solid #e6edf3;padding-top:7px;margin-top:7px;font-size:12px}
.phase-map-row:first-of-type{border-top:0;margin-top:0}
.phase-hits{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.phase-hit{display:inline-grid;padding:3px 7px;border-radius:6px;background:#e8f6f5;color:#0b6b69;font-size:11px}
.phase-hit i{font-style:normal;color:#5b7f7e;font-size:10px}
.phase-mismatch{display:inline-block;margin-top:5px;padding:3px 7px;border-radius:6px;background:#fbe3e4;color:#96201f;font-size:11px;font-weight:700}
.phase-empty{color:#7b8794;font-size:11px;margin:0}
.phase-hint{margin:9px 0 0;padding-top:8px;border-top:1px dashed #dce5ee;color:#657587;font-size:11px;line-height:1.45}