.wtsv-app {
  --wtsv-bg: #070812;
  --wtsv-card: rgba(17, 20, 33, .92);
  --wtsv-card2: rgba(24, 28, 44, .92);
  --wtsv-text: #f7f7fb;
  --wtsv-muted: #aab0c3;
  --wtsv-line: rgba(255,255,255,.12);
  --wtsv-accent: #7c5cff;
  --wtsv-accent2: #00d4ff;
  --wtsv-success: #42e6a4;
  --wtsv-danger: #ff4d6d;
  --wtsv-radius: 26px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--wtsv-text);
  background:
    radial-gradient(circle at 18% 10%, rgba(124,92,255,.24), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(0,212,255,.18), transparent 32%),
    linear-gradient(180deg, #070812 0%, #0d1020 100%);
  border-radius: 34px;
  overflow: hidden;
  margin: 30px 0;
}

.wtsv-app * { box-sizing: border-box; }

.wtsv-shell { padding: clamp(22px, 4vw, 44px); }

.wtsv-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.wtsv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1px solid var(--wtsv-line);
  border-radius: 999px;
  color: #dfe4ff;
  background: rgba(255,255,255,.05);
  font-size: 13px;
  margin-bottom: 16px;
}

.wtsv-eyebrow span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--wtsv-success);
  box-shadow: 0 0 0 8px rgba(66,230,164,.12);
}

.wtsv-hero h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.03;
  letter-spacing: -.06em;
  background: linear-gradient(135deg, #fff, #bbc3ff 50%, #64e8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wtsv-hero p {
  margin: 16px 0 0;
  max-width: 740px;
  color: var(--wtsv-muted);
  font-size: 18px;
}

.wtsv-status {
  min-width: 118px;
  text-align: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--wtsv-line);
  background: rgba(255,255,255,.055);
  color: var(--wtsv-success);
  font-weight: 750;
}

.wtsv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 22px;
}

.wtsv-main-card,
.wtsv-side-card {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid var(--wtsv-line);
  border-radius: var(--wtsv-radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
}

.wtsv-main-card { padding: clamp(20px, 3vw, 30px); }
.wtsv-side-card { padding: 18px; }

.wtsv-field-head,
.wtsv-save-row,
.wtsv-actions,
.wtsv-export-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wtsv-field-head {
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--wtsv-muted);
  font-size: 14px;
}

.wtsv-field-head label {
  color: var(--wtsv-text);
  font-weight: 800;
}

.wtsv-textarea {
  width: 100%;
  min-height: 230px;
  resize: vertical;
  border: 1px solid var(--wtsv-line);
  border-radius: 22px;
  padding: 18px;
  background: rgba(7,8,18,.68);
  color: var(--wtsv-text);
  font: inherit;
  outline: none;
}

.wtsv-textarea:focus,
.wtsv-control select:focus,
.wtsv-save-row input:focus {
  border-color: rgba(124,92,255,.75);
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}

.wtsv-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.wtsv-control {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--wtsv-line);
  border-radius: 18px;
  padding: 14px;
}

.wtsv-control label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--wtsv-muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.wtsv-control select,
.wtsv-save-row input {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--wtsv-line);
  background: rgba(7,8,18,.72);
  color: var(--wtsv-text);
  padding: 0 12px;
  outline: none;
}

.wtsv-control input[type="range"] { width: 100%; accent-color: var(--wtsv-accent); }

.wtsv-actions {
  flex-wrap: wrap;
  margin-top: 18px;
}

.wtsv-btn {
  appearance: none;
  border: 1px solid var(--wtsv-line);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--wtsv-text);
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.wtsv-btn:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255,255,255,.1); }

.wtsv-btn-primary {
  border: 0;
  background: linear-gradient(135deg, var(--wtsv-accent), var(--wtsv-accent2));
  box-shadow: 0 18px 44px rgba(124,92,255,.3);
}

.wtsv-btn-secondary { border-color: rgba(124,92,255,.38); }
.wtsv-btn-danger { color: #ffd8df; border-color: rgba(255,77,109,.3); }
.wtsv-btn-disabled { opacity: .55; cursor: not-allowed; }

.wtsv-save-row {
  margin-top: 18px;
}

.wtsv-save-row input { flex: 1; }

.wtsv-export-box {
  justify-content: space-between;
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,212,255,.06);
  border: 1px dashed rgba(0,212,255,.32);
}

.wtsv-export-box p {
  margin: 4px 0 0;
  color: var(--wtsv-muted);
  font-size: 14px;
}

.wtsv-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.wtsv-tabs button {
  border: 1px solid var(--wtsv-line);
  background: rgba(255,255,255,.04);
  color: var(--wtsv-muted);
  padding: 11px 10px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
}

.wtsv-tabs button.active {
  background: rgba(124,92,255,.18);
  color: var(--wtsv-text);
  border-color: rgba(124,92,255,.38);
}

.wtsv-list {
  display: grid;
  gap: 10px;
  max-height: 470px;
  overflow: auto;
  padding-right: 3px;
}

.wtsv-list.is-hidden { display: none; }

.wtsv-item {
  padding: 14px;
  border-radius: 17px;
  border: 1px solid var(--wtsv-line);
  background: rgba(7,8,18,.55);
}

.wtsv-item h4 {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.25;
}

.wtsv-item p {
  margin: 0;
  color: var(--wtsv-muted);
  font-size: 13px;
}

.wtsv-item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.wtsv-mini-btn {
  border: 1px solid var(--wtsv-line);
  background: rgba(255,255,255,.055);
  color: var(--wtsv-text);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.wtsv-note {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(66,230,164,.07);
  border: 1px solid rgba(66,230,164,.18);
}

.wtsv-note p {
  margin: 5px 0 0;
  color: var(--wtsv-muted);
  font-size: 13px;
}

@media (max-width: 960px) {
  .wtsv-layout { grid-template-columns: 1fr; }
  .wtsv-hero { flex-direction: column; }
}

@media (max-width: 620px) {
  .wtsv-app { border-radius: 22px; }
  .wtsv-controls-grid { grid-template-columns: 1fr; }
  .wtsv-save-row, .wtsv-export-box { flex-direction: column; align-items: stretch; }
  .wtsv-actions .wtsv-btn { flex: 1 1 calc(50% - 8px); }
}