.ss[data-v-3181def2bbe7b1a6] { position: relative; overflow: hidden; padding: 96px 20px 88px; background: var(--vb-surface, #f7f6fc); text-align: center;
}
.ss-img[data-v-3181def2bbe7b1a6] { background: #1f1b4d;
}
.ss-bg[data-v-3181def2bbe7b1a6] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35;
}
.ss-inner[data-v-3181def2bbe7b1a6] { position: relative; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.ss-badge[data-v-3181def2bbe7b1a6] { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--vb-primary, #3b2f8f); color: var(--vb-on-primary, #fff); font-size: 13px; font-weight: 600;
}
.ss-badge svg[data-v-3181def2bbe7b1a6] { color: #f5a524;
}
.ss-title[data-v-3181def2bbe7b1a6] { margin: 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.15; font-weight: 700; color: var(--vb-heading, #1f1b4d); letter-spacing: -0.5px;
}
.ss-img .ss-title[data-v-3181def2bbe7b1a6], .ss-img .ss-sub[data-v-3181def2bbe7b1a6] { color: #fff;
}
.ss-sub[data-v-3181def2bbe7b1a6] { margin: 0; font-size: clamp(16px, 2vw, 19px); color: var(--vb-muted, #5f6b78); max-width: 640px; line-height: 1.55;
}
.ss-box[data-v-3181def2bbe7b1a6] { width: 100%; display: flex; align-items: flex-end; gap: 10px; padding: 12px 12px 12px 20px; background: #fff; border: 2px solid var(--vb-border, #dcd8ef); border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(31, 27, 77, .35); box-sizing: border-box; transition: border-color .2s;
}
.ss-box[data-v-3181def2bbe7b1a6]:focus-within { border-color: var(--vb-primary, #3b2f8f);
}
.ss-box textarea[data-v-3181def2bbe7b1a6] { flex: 1; min-width: 0; border: 0; outline: none; resize: none; font: inherit; font-size: 18px; line-height: 1.5; color: var(--vb-text, #1c2430); background: transparent; padding: 8px 0; max-height: 180px; text-align: start;
}
.ss-box textarea[data-v-3181def2bbe7b1a6]::placeholder { color: #9aa3b2;
}
.ss-go[data-v-3181def2bbe7b1a6] { flex-shrink: 0; height: 52px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--vb-primary, #3b2f8f); color: var(--vb-on-primary, #fff); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, opacity .15s;
}
.ss-go[data-v-3181def2bbe7b1a6]:hover:not(:disabled) { transform: translateY(-1px);
}
.ss-go[data-v-3181def2bbe7b1a6]:disabled { opacity: .45; cursor: default;
}
.ss-go svg[data-v-3181def2bbe7b1a6]:dir(rtl) { transform: scaleX(-1);
}
.ss-swap-leave-active[data-v-3181def2bbe7b1a6] { transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
.ss-swap-leave-to[data-v-3181def2bbe7b1a6] { opacity: 0; transform: translateY(-8px); filter: blur(3px);
}
.ss-swap-enter-active button[data-v-3181def2bbe7b1a6] { animation: ss-in-3181def2bbe7b1a6 .6s cubic-bezier(.22, .8, .24, 1) both; animation-delay: calc(var(--i, 0) * 110ms);
}
.ss-swap-enter-active span[data-v-3181def2bbe7b1a6] { animation: ss-in-3181def2bbe7b1a6 .4s ease both;
}
@keyframes ss-in-3181def2bbe7b1a6 {
from { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(4px);
}
to { opacity: 1; transform: none; filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ss-swap-leave-active[data-v-3181def2bbe7b1a6], .ss-swap-enter-active button[data-v-3181def2bbe7b1a6], .ss-swap-enter-active span[data-v-3181def2bbe7b1a6] { transition: none; animation: none;
}
}
.ss-examples[data-v-3181def2bbe7b1a6] { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; font-size: 14px; color: var(--vb-muted, #5f6b78);
}
.ss-img .ss-examples[data-v-3181def2bbe7b1a6] { color: rgba(255, 255, 255, .85);
}
.ss-examples button[data-v-3181def2bbe7b1a6] { padding: 8px 14px; border: 1px solid var(--vb-border, #dcd8ef); border-radius: 999px; background: #fff; color: var(--vb-text, #1c2430); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s; text-align: start;
}
.ss-examples button[data-v-3181def2bbe7b1a6]:hover { border-color: var(--vb-primary, #3b2f8f);
}
.ss-sr[data-v-3181def2bbe7b1a6] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
@media (max-width: 640px) {
.ss[data-v-3181def2bbe7b1a6] { padding: 64px 16px 56px;
}
.ss-box[data-v-3181def2bbe7b1a6] { flex-direction: column; align-items: stretch; padding: 12px;
}
.ss-box textarea[data-v-3181def2bbe7b1a6] { font-size: 16px; padding: 4px 6px;
}
.ss-go[data-v-3181def2bbe7b1a6] { justify-content: center;
}
}