.rh {
  --rh-line:#624675;
  --rh-dim:#c7b1d8;
  color:#f5eeff;
  font:14px/1.55 system-ui,sans-serif;
  max-width:1680px;
  margin:auto
}
.rh * {
  box-sizing:border-box
}
.rh-hero {
  padding:26px 30px;
  border:1px solid var(--rh-line);
  border-radius:22px;
  background:radial-gradient(ellipse at right,#41305b,transparent 70%),#24172e;
  margin-bottom:22px
}
.rh-brand {
  display:flex;
  gap:18px;
  align-items:center
}
.rh h1 {
  font-size:clamp(24px,2.4vw,36px);
  margin:4px 0!important;
  line-height:1.2
}
.rh h1 img[data-tool-icon] {
  display:none!important
}
.rh-eyebrow {
  font-size:10px;
  letter-spacing:.14em;
  color:#d5b0ff;
  font-weight:750
}
.rh-hero p {
  color:var(--rh-dim);
  max-width:850px;
  margin:16px 0 0
}
.rh-desk {
  background:#16101f;
  border:1px solid var(--rh-line);
  border-radius:18px;
  overflow:hidden
}
.rh-toolbar,.rh-footer {
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  background:#2a1b36
}
.rh-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}
.rh button,.rh-button {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:10px 13px;
  min-height:40px;
  border:1px solid #805d94;
  border-radius:8px;
  background:#382449;
  color:#f6efff;
  font:600 12px/1.4 system-ui;
  cursor:pointer
}
.rh button:hover,.rh-button:hover {
  background:#513364;
  border-color:#c794e8
}
.rh .rh-primary {
  background:#834bb9;
  border-color:#bc8be1
}
.rh .rh-danger {
  color:#ffb9c9
}
.rh button:disabled {
  opacity:.45;
  cursor:default
}
.rh input,.rh select,.rh textarea {
  width:100%;
  min-width:0;
  padding:10px;
  border:1px solid #79568e;
  border-radius:8px;
  background:#190f24;
  color:#f5eeff;
  font:inherit
}
.rh textarea {
  resize:vertical
}
.rh label {
  display:grid;
  gap:7px;
  font-size:12px;
  color:var(--rh-dim)
}
.rh button:focus-visible,.rh input:focus-visible,.rh select:focus-visible,.rh textarea:focus-visible,.rh-button:focus-within {
  outline:3px solid #e0baff;
  outline-offset:2px
}
.rh h2 {
  font-size:16px;
  margin:0!important
}
.rh h3 {
  font-size:14px;
  margin:18px 0 12px
}
.rh-settings {
  display:grid;
  grid-template-columns:minmax(250px,1fr) 180px 180px auto;
  gap:12px;
  align-items:end;
  padding:18px;
  background:#21172b
}
.rh-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--rh-line)
}
.rh-metrics>div {
  padding:15px 22px;
  border-right:1px solid #50365e
}
.rh-metrics strong {
  display:block;
  font-size:24px;
  color:#d8b2ff
}
.rh-metrics span {
  font-size:11px;
  color:var(--rh-dim)
}
.rh-layout {
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  align-items:stretch
}
.rh-queue,.rh-editor {
  padding:20px;
  min-width:0;
  align-self:stretch;
  height:auto;
  min-height:0
}
.rh-queue {
  background:#24182e;
  border-right:1px solid var(--rh-line)
}
.rh-heading {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}
.rh-heading>span {
  color:#c8abd9;
  font-size:11px
}
.rh-list {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  margin:16px 0;
  max-height:640px;
  overflow:auto;
  padding:2px
}
.rh .rh-card {
  display:grid!important;
  gap:6px;
  justify-items:start;
  text-align:left;
  min-width:0;
  padding:13px;
  background:#1c1326
}
.rh-card strong,.rh-card span {
  overflow-wrap:anywhere;
  text-align:left
}
.rh-card strong {
  font-size:13px
}
.rh-card small {
  font-size:10px;
  color:#d8b3ef
}
.rh-card span {
  font-size:11px;
  color:var(--rh-dim)
}
.rh-card em {
  font-size:10px;
  font-style:normal
}
.rh-card[aria-current=true] {
  background:#492b5c;
  border-color:#d2a0f7;
  box-shadow:inset 3px 0 #d2a0f7
}
.rh-included {
  color:#8fe4c2
}
.rh-muted {
  color:#d4c0a5
}
.rh-help {
  font-size:11px;
  line-height:1.65;
  color:var(--rh-dim);
  margin:10px 0
}
.rh-editor {
  background:radial-gradient(ellipse at top,#2d1b3b,transparent 70%)
}
.rh-editor form {
  display:grid;
  gap:14px
}
.rh-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.rh-guidance {
  margin:0;
  padding:13px;
  border-left:3px solid #b888e4;
  border-radius:0 9px 9px 0;
  background:#302039;
  color:#ddc3ed;
  font-size:12px
}
.rh-output {
  grid-column:1/-1;
  padding:22px;
  border-top:1px solid var(--rh-line);
  background:#23182c;
  min-width:0
}
.rh pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#11151e;
  border:1px solid #5b426b;
  border-radius:12px;
  padding:20px;
  font:12px/1.85 ui-monospace,Consolas,monospace;
  color:#b7f0d6;
  margin:0;
  max-height:320px;
  overflow:auto
}
.rh-decision {
  padding:12px 15px;
  margin-top:8px;
  border:1px solid #50365e;
  border-left:3px solid #b09a79;
  background:#1a1222;
  border-radius:9px
}
.rh-decision.is-included {
  border-left-color:#69cda5
}
.rh-decision strong {
  font-size:12px;
  overflow-wrap:anywhere
}
.rh-decision p,.rh-decision small {
  font-size:11px;
  color:var(--rh-dim);
  margin:6px 0 0
}
.rh-decision .rh-warning {
  color:#eccb95
}
.rh-footer {
  border-top:1px solid var(--rh-line)
}
.rh-footer p {
  flex:1;
  min-width:220px;
  margin:0;
  font-size:12px
}
.rh [data-error=true] {
  color:#ffb7c9
}
.rh-guide {
  padding:24px;
  border:1px solid #52365f;
  border-radius:16px;
  background:#21152b;
  margin-top:24px
}
.rh-guide ol {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding-left:20px
}
.rh-guide p {
  font-size:12px;
  color:var(--rh-dim)
}
.rh-guide a {
  color:#d5acfa
}
.rh-focus {
  position:fixed!important;
  inset:0;
  overflow:auto!important;
  z-index:9999;
  border-radius:0!important
}
.rh [hidden] {
  display:none!important
}
@media(max-width:1000px) {
  .rh-settings {
    grid-template-columns:1fr 1fr
  }
  .rh-layout {
    grid-template-columns:280px minmax(0,1fr)
  }
}
@media(max-width:700px) {
  .rh-layout {
    display:flex;
    flex-direction:column
  }
  .rh-queue,.rh-editor,.rh-output {
    width:100%;
    padding:16px
  }
  .rh-queue {
    border-right:0;
    border-bottom:1px solid var(--rh-line)
  }
  .rh-list {
    max-height:270px
  }
  .rh-brand {
    gap:12px
  }
  .rh-brand img {
    width:48px;
    height:48px
  }
  .rh-hero {
    padding:20px
  }
  .rh-settings {
    grid-template-columns:1fr;
    padding:16px
  }
  .rh-metrics {
    grid-template-columns:repeat(2,1fr)
  }
  .rh-pair {
    grid-template-columns:1fr
  }
  .rh-output>.rh-heading {
    flex-wrap:wrap
  }
  .rh-guide ol {
    grid-template-columns:1fr;
    gap:16px
  }
}