/* Aurora Pro visual enhancements */



.pro-badge {

 display: inline-block;

 margin-left:.35rem;

 padding:.1rem.35rem;

 border-radius:.25rem;

 font-size: 8px;

 font-weight: 800;

 letter-spacing:.1em;

 background: linear-gradient(135deg, rgba(34, 211, 238,.25), rgba(251, 146, 60,.2));

 border: 1px solid rgba(34, 211, 238,.35);

 color: #67e8f9;

 vertical-align: middle;

}



#btnEyedropper.on,

#btnProPen.on,

.pro-view-btn.on {

 border-color: rgba(34, 211, 238,.65)!important;

 background: rgba(34, 211, 238,.15)!important;

 color: #a5f3fc!important;

 box-shadow: 0 0 16px -4px rgba(34, 211, 238,.6);

}



#proAlignExtra.chip:hover {

 border-color: rgba(34, 211, 238,.45);

}



.pro-brand-strip {

 display: flex;

 flex-wrap: wrap;

 gap:.35rem;

 margin-top:.5rem;

}

.pro-brand-swatch {

 width: 1.5rem;

 height: 1.5rem;

 border-radius:.4rem;

 border: 1px solid rgba(255, 255, 255,.2);

 cursor: pointer;

 transition: transform.15s;

}

.pro-brand-swatch:hover { transform: scale(1.12); }



/* Page strip */

#proPageBar {

 display: flex;

 align-items: center;

 gap:.5rem;

 padding:.35rem.75rem;

 border-radius: 1rem;

 flex-shrink: 0;

}

#proPageStrip {

 display: flex;

 min-width: 0;

 align-items: center;

 gap:.35rem;

 overflow-x: auto;

}

#proPageStrip button.on {

 border-color: rgba(34, 211, 238,.7)!important;

 background: rgba(34, 211, 238,.2)!important;

 color: #a5f3fc!important;

}



/* View overlays */

#proRulerTop,

#proRulerLeft {

 position: absolute;

 z-index: 12;

 pointer-events: none;

 font-size: 9px;

 color: rgba(148, 163, 184,.85);

 background: rgba(15, 23, 42,.92);

}

#proRulerTop { top: 0; left: 24px; right: 0; height: 22px; border-bottom: 1px solid rgba(148, 163, 184,.2); }

#proRulerLeft { top: 22px; left: 0; bottom: 0; width: 24px; border-right: 1px solid rgba(148, 163, 184,.2); }

#proGridOverlay,

#proBleedOverlay {

 position: absolute;

 inset: 0;

 z-index: 5;

 pointer-events: none;

}

#proBleedOverlay {

 border: 1px dashed rgba(34, 211, 238,.45);

 box-shadow: inset 0 0 0 1px rgba(251, 146, 60,.25);

}



/* Designs modal */

#proDesignsModal {

 position: fixed;

 inset: 0;

 z-index: 80;

 display: none;

 align-items: center;

 justify-content: center;

 padding: 1rem;

 background: rgba(2, 6, 23,.75);

 backdrop-filter: blur(6px);

}

#proDesignsModal.open { display: flex; }

#proDesignsModal.pro-dm-card {

 transition: transform.15s, border-color.15s;

}

#proDesignsModal.pro-dm-card:hover {

 transform: translateY(-2px);

 border-color: rgba(34, 211, 238,.5);

}



.spin { animation: proSpin.8s linear infinite; }

@keyframes proSpin { to { transform: rotate(360deg); } }



.pro-view-tools {

 display: flex;

 flex-wrap: wrap;

 align-items: center;

 gap:.25rem;

}

.pro-view-btn {

 min-width: 2rem;

 padding:.25rem.45rem;

 font-size: 10px;

 font-weight: 700;

}