.scv-wrapper {
max-width: 480px;
margin: 2rem auto;
padding: 0 1rem;
} @media (max-width: 480px) {
.scv-wrapper {
max-width: 100%;
padding: 0;
margin: 1rem 0;
}
}
.scv-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 2px;
padding: 2.5rem 2.5rem 2rem;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.scv-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #c9a84c, transparent);
opacity: 0.7;
}
.scv-header {
margin-bottom: 1.75rem;
text-align: center;
}
.scv-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid #e0e0e0;
border-radius: 50%;
margin-bottom: 1rem;
color: #c9a84c;
}
.scv-icon svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.scv-title {
font-size: 28px;
font-weight: 300;
letter-spacing: 0.04em;
color: #333333;
margin: 0 0 0.35rem;
line-height: 1.2;
}
.scv-subtitle {
font-size: 18px;
color: #888888;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0;
}
.scv-label {
display: block;
font-size: 14px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #888888;
margin-bottom: 0.5rem;
}
.scv-input-wrap {
position: relative;
margin-bottom: 1.25rem;
}
.scv-input {
width: 100%;
box-sizing: border-box;
background: #f8f8f8;
border: 1px solid #e0e0e0;
border-radius: 2px;
color: #333333;
font-size: 2rem;
letter-spacing: 0.35em;
text-align: center;
text-transform: uppercase;
padding: 0.85rem 1rem;
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
-webkit-appearance: none;
}
.scv-input::placeholder {
color: #cccccc;
letter-spacing: 0.2em;
}
.scv-input:focus {
border-color: #c9a84c;
box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.scv-btn {
width: 100%;
background: #FF5722;
border: 1px solid #c9a84c;
border-radius: 2px;
color: #ffffff;
font-size: 16px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.85rem 1rem;
cursor: pointer;
transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.scv-btn:hover:not(:disabled) {
background: #c9a84c;
color: #f8f8f8;
}
.scv-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.scv-btn-arrow {
transition: transform 200ms ease;
display: inline-block;
}
.scv-btn:hover:not(:disabled) .scv-btn-arrow {
transform: translateX(3px);
}
.scv-spinner {
width: 13px;
height: 13px;
border: 1.5px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: scv-spin 0.7s linear infinite;
display: none;
}
@keyframes scv-spin {
to { transform: rotate(360deg); }
}
.scv-message {
margin-top: 1rem;
padding: 0.75rem 1rem;
border-radius: 2px;
font-size: 16px;
letter-spacing: 0.04em;
line-height: 1.5;
display: none;
align-items: flex-start;
gap: 0.5rem;
}
.scv-message.is-visible { display: flex; }
.scv-message-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 0.4em;
}
.scv-message.scv-success {
background: rgba(76,175,125,0.1);
color: #4caf7d;
border: 1px solid rgba(76,175,125,0.2);
}
.scv-message.scv-success .scv-message-dot { background: #4caf7d; }
.scv-message.scv-error {
background: rgba(207,102,121,0.1);
color: #cf6679;
border: 1px solid rgba(207,102,121,0.2);
}
.scv-message.scv-error .scv-message-dot { background: #cf6679; }
.scv-footer {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid #e0e0e0;
text-align: center;
font-size: 0.65rem;
color: #888888;
letter-spacing: 0.06em;
}