.sp-perspective-surface { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
.sp-guide-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.sp-guide-overlay[hidden], .sp-perspective [hidden] { display: none !important; }
.sp-guide-ray { fill: none; stroke-width: 1.6; }
.sp-guide-group-0 { stroke: #3b82f6; }
.sp-guide-group-1 { stroke: #ec4899; }
.sp-guide-horizon { stroke: #1e1b4b; stroke-width: 2.5; stroke-dasharray: 10 7; }
.sp-guide-point { fill: #fff; stroke-width: 3.5; }
.sp-perspective { margin: .75rem 0; font-size: .8rem; }
.sp-perspective button { min-height: 44px; min-width: 44px; padding: .6rem .8rem; border: 2px solid #cbd5e1; border-radius: 10px; background: #fff; color: #1e293b; font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.sp-perspective button[aria-pressed="true"] { border-color: #EC4899; background: #EC489922; }
#sp-guides-open { width: 100%; }
#sp-guides-panel { margin-top: .5rem; padding: .75rem; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; }
.sp-guide-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.sp-guide-actions button { flex: 1; }
.sp-guide-field { display: block; margin-top: .4rem; }
.sp-guide-field label { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
.sp-guide-field input { display: block; width: 100%; min-width: 0; min-height: 44px; accent-color: #EC4899; }
.sp-perspective p { line-height: 1.5; overflow-wrap: anywhere; margin: .4rem 0; }
#sp-guides-status { font-weight: 700; }
.sp-perspective button:focus-visible, .sp-perspective input:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sp-perspective *, .sp-guide-overlay { animation: none; transition: none; } }