.phone-preview[data-v-23c50d7a]{display:flex;justify-content:center;align-items:center;padding:40px 20px;background:#f8f9fa;border-radius:12px;position:relative;&[data-v-23c50d7a]:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 50%,rgba(120,119,198,.03) 0,transparent 50%),radial-gradient(circle at 80% 80%,hsla(0,100%,71%,.03) 0,transparent 50%),radial-gradient(circle at 40% 20%,rgba(78,205,196,.03) 0,transparent 50%);border-radius:12px;pointer-events:none}}.phone-frame[data-v-23c50d7a]{position:relative;width:300px;max-width:100%;background:#1a1a1a;border-radius:32px;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.12),0 16px 48px rgba(0,0,0,.16);z-index:1}.phone-notch[data-v-23c50d7a]{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#1a1a1a;border-radius:0 0 16px 16px;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,.2)}.phone-frame canvas[data-v-23c50d7a]{width:100%;height:auto;display:block;border-radius:26px;cursor:crosshair}.template-card[data-v-23c50d7a]{cursor:pointer;transition:all .3s ease;border:2px solid transparent;&[data-v-23c50d7a]:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}&.primary--border[data-v-23c50d7a]{border-color:var(--v-primary-base)!important}}.template-overlay[data-v-23c50d7a]{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s ease}.template-card:hover .template-overlay[data-v-23c50d7a]{opacity:1}