/* Feature Gate Overlay Styles */
.feature-gated{position:relative}
.feature-gated.feature-locked .feature-content{opacity:.4;pointer-events:none;user-select:none;filter:grayscale(.5)}
.feature-locked-overlay{position:absolute;inset:0;z-index:5;background:rgba(13,13,20,.75);backdrop-filter:blur(2px);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;gap:.5rem}
.feature-gated:not(.feature-locked) .feature-locked-overlay{display:none}
.feature-locked-overlay .lock-icon{font-size:2rem}
.feature-locked-overlay h4{font-family:'Cinzel',serif;color:#e8a838;font-size:1rem;margin:0}
.feature-locked-overlay p{color:#d4d4d8;font-size:.875rem;margin:0}
.feature-locked-overlay .cta{display:inline-block;margin-top:.5rem;padding:.5rem 1.2rem;background:linear-gradient(135deg,#e8a838,#d4912e);color:#0d0d14;border-radius:8px;font-weight:600;font-size:.875rem;text-decoration:none;transition:filter .15s}
.feature-locked-overlay .cta:hover{filter:brightness(1.15);text-decoration:none}

/* Soft-limit quota bar */
.feature-quota-bar{background:var(--surface2,#252547);border-radius:8px;padding:.4rem .8rem;font-size:.875rem;color:var(--muted,#71717a);margin-bottom:.5rem}
.feature-quota-bar .quota-progress{height:4px;background:var(--surface3,#2f2f5e);border-radius:2px;margin-top:.3rem;overflow:hidden}
.feature-quota-bar .quota-fill{height:100%;background:linear-gradient(90deg,var(--green,#4ecca3),var(--amber,#e8a838));border-radius:2px;transition:width .3s ease}
.feature-quota-bar.quota-exceeded .quota-fill{background:var(--red,#c0392b)}

/* Unlock animation */
.feature-gated.feature-unlocking .feature-locked-overlay{animation:fgFadeOut .4s ease forwards}
.feature-gated.feature-unlocking .feature-content{animation:fgFadeIn .4s ease forwards}
@keyframes fgFadeOut{from{opacity:1}to{opacity:0}}
@keyframes fgFadeIn{from{opacity:.4;filter:grayscale(.5)}to{opacity:1;filter:grayscale(0)}}

/* Mobile responsive */
@media(max-width:600px){
  .feature-locked-overlay{padding:1rem}
  .feature-locked-overlay .lock-icon{font-size:1.5rem}
  .feature-locked-overlay h4{font-size:.875rem}
  .feature-locked-overlay p{font-size:.8rem}
}
@media print{.feature-locked-overlay{display:none!important}}