.wsc {
      --bg: #f4f7fb;
      --panel: #ffffff;
      --ink: #132033;
      --muted: #66758a;
      --line: #d8e1ee;
      --blue: #315cff;
      --red: #ef1b2d;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--bg);
      padding: 18px;
      border-radius: 10px;
    }
    .wsc * { box-sizing: border-box; }
    .wsc-grid {
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }
    .wsc-panel,
    .wsc-preview-shell {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
    }
    .wsc-title {
      margin: 0 0 12px;
      font-size: 20px;
      font-weight: 700;
    }
    .wsc-field {
      display: grid;
      gap: 6px;
      margin: 0 0 12px;
      font-size: 13px;
      font-weight: 700;
    }
    .wsc input,
    .wsc textarea,
    .wsc select {
      width: 100%;
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 9px 10px;
      color: var(--ink);
      background: #fff;
      font: inherit;
    }
    .wsc textarea {
      min-height: 86px;
      resize: vertical;
    }
    .wsc-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .wsc-button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
    }
    .wsc button {
      min-height: 40px;
      border: 0;
      border-radius: 7px;
      padding: 9px 13px;
      color: #fff;
      background: var(--blue);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    .wsc button.secondary {
      color: var(--ink);
      background: #e9eef7;
    }
    .wsc-status {
      min-height: 20px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }
    .wsc-check {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
    }
    .wsc-check input {
      width: auto;
      min-height: 0;
    }
    .wsc-preview-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .wsc-size {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }
    .wsc-preview {
      min-height: 420px;
      display: grid;
      place-items: center;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background:
        linear-gradient(45deg, #eef2f7 25%, transparent 25%) -8px 0 / 16px 16px,
        linear-gradient(-45deg, #eef2f7 25%, transparent 25%) -8px 0 / 16px 16px,
        linear-gradient(45deg, transparent 75%, #eef2f7 75%) -8px 0 / 16px 16px,
        linear-gradient(-45deg, transparent 75%, #eef2f7 75%) -8px 0 / 16px 16px,
        #fff;
    }
    .wsc-preview svg {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 560px;
      overflow: visible;
    }
    .wsc-preview svg path {
      stroke-width: 0.35 !important;
    }
    .wsc-note {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }
    .wsc-canvas { display: none; }
    @media (max-width: 880px) {
      .wsc-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .wsc { padding: 12px; }
      .wsc-row { grid-template-columns: 1fr; }
      .wsc-preview { min-height: 300px; padding: 10px; }
      .wsc button { width: 100%; }
    }

.wsc-feature-block {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faff;
}
.wsc-toggle { width: 100%; }
.wsc-toggle.is-active {
  color: #fff;
  background: var(--blue);
}
.wsc input[type="range"] {
  min-height: 28px;
  padding: 0;
  cursor: pointer;
}
.wsc-range-value {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.wsc-loop-hint{display:block;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.35;}