/* src/styles/v64-phase4-evolution.css
   Phase 4 — Session Evolution + Morphing panel inside Advanced Resonance. */

.p4-panel{margin-top:14px;padding:14px;border:1px solid rgba(95,227,255,.2);border-radius:12px;background:rgba(8,14,30,.55);}
.p4-title{font-size:.72rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:#5fe3ff;margin-bottom:10px;}
.p4-phases{display:flex;justify-content:space-between;gap:6px;margin-bottom:8px;}
.p4-phase{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.45;transition:opacity .3s ease;}
.p4-phase.active{opacity:1;}
.p4-dot{width:10px;height:10px;border-radius:50%;background:#5fe3ff;box-shadow:0 0 0 0 rgba(95,227,255,.5);transition:box-shadow .3s ease,transform .3s ease;}
.p4-phase.active .p4-dot{transform:scale(1.3);box-shadow:0 0 14px rgba(95,227,255,.8),0 0 26px rgba(95,227,255,.4);}
.p4-phase-label{font-size:.6rem;text-transform:capitalize;color:#c7d4ec;}
.p4-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:8px;}
.p4-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#5fe3ff,#7a4dff);transition:width .4s linear;}
.p4-readout{font-size:.72rem;color:#aebdd8;}

.p4-morph{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
.p4-morph-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.p4-morph-row .ar-select{flex:1 1 auto;min-width:90px;}
.p4-morph-row .ar-btn{flex:0 0 auto;}

@media(max-width:760px){
  .p4-phase-label{font-size:.54rem;}
  .p4-morph-row{gap:6px;}
}