:root{
  --bg-page: transparent; --card-bg:#ffffff; --card-border:#e5e7eb; --text:#0b1220; --muted:#6b7280;
  --primary:#111111; --primary-text:#ffffff; --ok:#10b981; --err:#ef4444; --focus:#2563eb;
}
.sv-wrap{ background: var(--bg-page); padding: 40px 16px; }
.sv-container{ max-width: 680px; margin: 0 auto; }
.sv-header{ text-align: center; margin-bottom: 18px; }
.sv-header h1{ margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); color: var(--text); letter-spacing: .2px; }
.sv-header p{ margin: 0; color: var(--muted); font-size: 14px; }
.sv-card{ background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: 18px; }
.sv-form{ display: flex; flex-direction: column; gap: 10px; }
.sv-form label{ font-weight: 600; color: var(--text); }
.sv-row{ display: flex; gap: 10px; align-items: center; }
.sv-row input{ flex:1 1 auto; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 16px; color: var(--text); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.sv-row input::placeholder{ color:#9aa3af; }
.sv-row input:focus{ border-color: var(--focus); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.sv-btn{ padding: 12px 16px; border-radius: 10px; border: 1px solid #111; background: var(--primary); color: var(--primary-text); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: transform .06s, filter .15s; }
.sv-btn:active{ transform: translateY(1px); }
.sv-btn:hover{ filter: brightness(1.05); }
.sv-result{ min-height: 120px; margin-top: 8px; display: grid; place-items: center; text-align: center; }

.sv-ok{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(16,185,129,.35); border-radius: 12px; background: rgba(16,185,129,.08); color: #065f46; font-weight: 800; }
.sv-err{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(239,68,68,.35); border-radius: 12px; background: rgba(239,68,68,.08); color: #7f1d1d; font-weight: 800; }
.sv-icon{ width: 22px; height: 22px; }
.sv-message{ margin-top:12px; font-size:14px; line-height:1.5; color:#374151; background:#f9fafb; border-left:4px solid #10b981; padding:10px 14px; border-radius:6px; max-width:420px; margin-left:auto; margin-right:auto; }
.sv-actions{ margin-top:12px; display:flex; justify-content:center; }
.sv-link{ display:inline-flex; align-items:center; gap:8px; border:1px solid #111; background:#111; color:#fff; padding:10px 14px; border-radius:10px; font-weight:800; letter-spacing:.04em; text-decoration:none; }
.sv-link:hover{ filter:brightness(1.05); }

@media (max-width: 560px){
  .sv-row{ flex-direction: column; align-items: stretch; }
  .sv-btn{ width: 100%; }
}