.rf-remote-support-app,
#rf-remote-support-app {
  --rf-rs-ink: #1a1a18;
  --rf-rs-muted: #5c5a54;
  --rf-rs-line: #d8d4cb;
  --rf-rs-panel: #ffffff;
  --rf-rs-accent: #5b2d8e;
  --rf-rs-accent-dark: #3f1f66;
  --rf-rs-accent-ink: #ffffff;
  --rf-rs-signal: var(--rf-signal, #f3e08a);
  --rf-rs-signal-ink: var(--rf-signal-ink, #1a1a18);
  --rf-rs-ok: #1f6b4a;
  --rf-rs-err: #9b2c2c;
  --rf-rs-radius: 14px;
  --rf-rs-shadow: 0 18px 40px rgba(26, 26, 24, 0.08);
  color: var(--rf-rs-ink);
  font-family: "DM Sans", system-ui, sans-serif;
  max-width: 42rem;
  margin: 0 auto;
}

.rf-remote-support-app *,
#rf-remote-support-app * {
  box-sizing: border-box;
}

.rf-rs-panel {
  background: var(--rf-rs-panel);
  border: 1px solid var(--rf-rs-line);
  border-radius: var(--rf-rs-radius);
  box-shadow: var(--rf-rs-shadow);
  padding: 1.5rem;
}

.rf-rs-panel h2,
.rf-rs-panel h3 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  color: var(--rf-rs-accent-dark);
}

.rf-rs-panel-lede {
  margin: 0 0 1.25rem;
  color: var(--rf-rs-muted);
  line-height: 1.55;
}

.rf-rs-form {
  display: grid;
  gap: 1.1rem;
}

.rf-rs-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rf-rs-field {
  display: grid;
  gap: 0.35rem;
}

.rf-rs-field--full {
  grid-column: 1 / -1;
}

.rf-rs-field label {
  font-size: 0.92rem;
  font-weight: 650;
}

.rf-rs-optional {
  font-weight: 400;
  color: var(--rf-rs-muted);
}

.rf-rs-field input,
.rf-rs-field textarea {
  width: 100%;
  border: 1px solid var(--rf-rs-line);
  border-radius: 10px;
  padding: 0.72rem 0.85rem;
  font: inherit;
  color: inherit;
  background: #fff;
}

.rf-rs-field textarea {
  min-height: 6rem;
  resize: vertical;
}

.rf-rs-field input:focus,
.rf-rs-field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--rf-rs-accent) 40%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--rf-rs-accent) 50%, var(--rf-rs-line));
}

.rf-rs-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.rf-rs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.rf-rs-submit,
.rf-rs-download,
.rf-rs-reset {
  appearance: none;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  padding: 0.82rem 1.35rem;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rf-rs-submit,
.rf-rs-download {
  background: var(--rf-rs-accent);
  color: var(--rf-rs-accent-ink);
}

.rf-rs-submit:hover:not(:disabled),
.rf-rs-download:hover {
  background: var(--rf-rs-accent-dark);
}

.rf-rs-submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

.rf-rs-reset {
  background: transparent;
  color: var(--rf-rs-accent);
  border: 1px solid var(--rf-rs-accent);
  margin-top: 0.75rem;
}

.rf-rs-reset:hover {
  background: var(--rf-rs-accent);
  color: var(--rf-rs-accent-ink);
}

.rf-rs-status {
  min-height: 1.4rem;
  font-size: 0.95rem;
  color: var(--rf-rs-muted);
}

.rf-rs-status[data-tone="error"] {
  color: var(--rf-rs-err);
}

.rf-rs-success > p {
  margin: 0 0 0.85rem;
  color: var(--rf-rs-muted);
  line-height: 1.55;
}

.rf-rs-ticket {
  color: var(--rf-rs-accent-dark) !important;
  font-weight: 600;
}

.rf-rs-detected {
  margin: 0 0 1rem;
  color: var(--rf-rs-accent-dark);
  font-weight: 600;
}

/* Device note: copy only — signal marks carry emphasis, not a yellow box */
.rf-rs-device-note {
  margin: 0 0 1.15rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--rf-rs-muted);
  line-height: 1.55;
}

.rf-rs-os-wrap {
  margin: 1.15rem 0 0;
}

.rf-rs-os-wrap.is-primary .rf-rs-os {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.rf-rs-os-wrap.is-secondary {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rf-rs-line);
}

.rf-rs-os-alt-label {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rf-rs-muted);
}

.rf-rs-os h4 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rf-rs-accent-dark);
}

.rf-rs-steps {
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.55rem;
  color: var(--rf-rs-ink);
  line-height: 1.45;
}

.rf-rs-steps code {
  font-size: 0.9em;
  background: color-mix(in srgb, var(--rf-rs-accent) 10%, #fff);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.rf-remote-support-app mark.rf-signal,
#rf-remote-support-app mark.rf-signal,
.rf-remote-support-app .rf-signal,
#rf-remote-support-app .rf-signal {
  background: var(--rf-rs-signal);
  color: var(--rf-rs-signal-ink);
  padding: 0.05em 0.28em;
  border-radius: 0.15em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Demo notice: highlight the idea, do not paint a yellow panel */
.rf-rs-mock {
  margin: 0 0 0.85rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--rf-rs-muted);
  line-height: 1.55;
}

.rf-rs-alt {
  margin: 1.25rem 0 0;
  color: var(--rf-rs-muted);
  font-size: 0.95rem;
}

.rf-rs-alt a {
  color: var(--rf-rs-accent);
  font-weight: 600;
  text-decoration: none;
}

.rf-rs-alt a:hover {
  color: var(--rf-rs-accent-dark);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .rf-rs-grid {
    grid-template-columns: 1fr;
  }

  .rf-rs-field--full {
    grid-column: auto;
  }

  .rf-rs-submit,
  .rf-rs-download {
    width: 100%;
  }
}