:root{
  --tvp-accent:#9146FF;
  --tvp-input-text:#772CE8;
  --tvp-placeholder:#BBA0FF;
  --tvp-bg:linear-gradient(135deg,#0f0f11, #1b1b20 40%, #24242b 100%);
  --tvp-text:#EDEDF0;
  --tvp-muted:#A1A1AA;
  --tvp-border:#2E2E35;
  --tvp-card:#11111480;
}
@media (prefers-color-scheme: light){
  :root{
    --tvp-bg:linear-gradient(135deg,#f7f7fb, #f0f1f7 40%, #ebecf3 100%);
    --tvp-text:#1f1f22;
    --tvp-muted:#55565c;
    --tvp-border:#d8dae0;
    --tvp-card:#ffffffcc;
  }
}
.tvp-card{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: var(--tvp-bg);
  color: var(--tvp-text);
  padding: 28px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px var(--tvp-border);
  backdrop-filter: blur(6px);
  max-width: 640px;
  margin: 16px auto;
}
.tvp-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 16px;
}
.tvp-logo{ width:28px;height:28px; fill: var(--tvp-accent); }
.tvp-title{ font-weight: 700; }
.tvp-subtitle{ margin-left:auto; font-size: 12px; color: var(--tvp-muted); }
.tvp-form{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.tvp-field{ display:flex; flex-direction:column; gap:6px; }
.tvp-field label{ font-weight:600; font-size:14px; }
.tvp-field input{
  background: var(--tvp-card);
  border: 1px solid var(--tvp-border);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--tvp-input-text);
  caret-color: var(--tvp-accent);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.tvp-field input::placeholder{ color: var(--tvp-placeholder); }
.tvp-field input:focus{
  border-color: color-mix(in oklab, var(--tvp-accent) 50%, var(--tvp-border));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tvp-accent) 22%, transparent);
}
.tvp-button{
  display:inline-block;
  grid-column: 1 / -1;
  justify-self: start;
  appearance: none;
  border: 0;
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  background: radial-gradient(100% 100% at 100% 0, color-mix(in oklab, var(--tvp-accent) 80%, #fff) 0, var(--tvp-accent) 100%);
  color: white;
  box-shadow: 0 10px 20px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
}
.tvp-button:after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #fff3, transparent 40%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.tvp-button:hover:after{ transform: translateX(0); }
.tvp-help{ grid-column: 1 / -1; margin: 6px 2px 0; font-size: 12px; color: var(--tvp-muted); }

.tvp-inline{ display:inline-block; margin: 0; }
.tvp-inline .tvp-button{ margin: 0; }

@media (max-width: 560px){
  .tvp-form{ grid-template-columns: 1fr; }
}