.rlc-card {
  --rlc-theme-surface: var(--color-surface, #1c1c1c);
  --rlc-theme-surface-hover: var(--color-surface-hover, #222222);
  --rlc-theme-text: var(--color-text, #d0d0d0);
  --rlc-theme-heading: var(--color-heading, #f0f0f0);
  --rlc-theme-border: var(--color-border, #2a2a2a);
  --rlc-theme-border-light: var(--color-border-light, #363636);
  --rlc-theme-accent: var(--color-accent, #e8c87a);
  --rlc-bg: color-mix(in srgb, var(--rlc-theme-surface) 90%, #0b0f14 10%);
  --rlc-panel: color-mix(in srgb, var(--rlc-theme-surface-hover) 88%, #0f172a 12%);
  --rlc-panel-strong: color-mix(in srgb, var(--rlc-theme-surface-hover) 78%, #0b1220 22%);
  --rlc-text: var(--rlc-theme-text);
  --rlc-text-soft: color-mix(in srgb, var(--rlc-text) 68%, transparent);
  --rlc-border: color-mix(in srgb, var(--rlc-theme-border-light) 82%, transparent);
  --rlc-accent: color-mix(in srgb, var(--rlc-theme-accent) 92%, #ffffff 8%);
  --rlc-accent-soft: color-mix(in srgb, var(--rlc-theme-accent) 12%, var(--rlc-bg));
  --rlc-control-height: 32px;
  width: 100%;
  max-width: 980px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid var(--rlc-border);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--rlc-bg) 0%, color-mix(in srgb, var(--rlc-bg) 92%, #000000 8%) 100%);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--rlc-text) 8%, transparent);
  color: var(--rlc-text);
}

.rlc-card,
.rlc-card *,
.rlc-card *::before,
.rlc-card *::after {
  box-sizing: border-box;
}

.rlc-header h3 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  line-height: 1.15;
  color: var(--rlc-theme-heading);
}

.rlc-header p {
  margin: 0;
  max-width: 68ch;
  color: var(--rlc-text-soft);
}

.rlc-filter-block + .rlc-filter-block {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--rlc-border);
}

.rlc-equation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.rlc-equation-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--rlc-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rlc-panel-strong) 92%, #000000 8%);
  color: var(--rlc-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.rlc-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(0, 1.36fr) minmax(176px, 0.64fr);
  gap: 16px;
  align-items: end;
  margin-top: 22px;
}

.rlc-section {
  display: grid;
  gap: 10px;
}

.rlc-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
}

.rlc-inline-field {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.rlc-inline-field input {
  width: 100%;
  min-width: 112px;
  min-height: var(--rlc-control-height);
  padding: 6px 14px;
  border: 1px solid var(--rlc-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rlc-panel-strong) 92%, #000000 8%);
  color: var(--rlc-text);
  font: inherit;
  font-size: 0.88rem;
}

.rlc-inline-field input::placeholder {
  color: color-mix(in srgb, var(--rlc-text) 54%, transparent);
}

.rlc-inline-field input[type='number'] {
  -moz-appearance: textfield;
}

.rlc-inline-field input[type='number']::-webkit-outer-spin-button,
.rlc-inline-field input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rlc-inline-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--rlc-accent) 52%, var(--rlc-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rlc-accent) 14%, transparent);
}

.rlc-unit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rlc-unit-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 0;
  padding: 6px 14px;
  border: 1px solid var(--rlc-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rlc-panel-strong) 92%, #000000 8%);
  color: var(--rlc-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  transition: 160ms ease;
}

.rlc-unit-button:hover {
  border-color: color-mix(in srgb, var(--rlc-accent) 40%, var(--rlc-border));
  transform: translateY(-1px);
}

.rlc-unit-button.is-active {
  background: linear-gradient(135deg, var(--rlc-accent) 0%, color-mix(in srgb, var(--rlc-accent) 78%, #0f172a 22%) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--rlc-accent) 20%, transparent);
}

.rlc-summary-panel {
  display: grid;
  gap: 10px;
  min-height: 100%;
  width: min(100%, 192px);
  justify-self: end;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--rlc-accent) 22%, transparent);
  border-radius: 18px;
  background: var(--rlc-accent-soft);
}

.rlc-summary-item {
  display: grid;
  gap: 4px;
}

.rlc-summary-label {
  color: var(--rlc-text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rlc-summary-item strong {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--rlc-theme-heading);
}

.rlc-graph-card {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--rlc-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--rlc-panel) 96%, #ffffff 4%);
}

.rlc-graph-card.is-hidden {
  display: none;
}

.rlc-graph-header h4 {
  margin: 0 0 6px;
  font-size: 1.04rem;
  color: var(--rlc-theme-heading);
}

.rlc-graph-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.rlc-phase-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.rlc-phase-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rlc-phase-box {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--rlc-accent) 28%, var(--rlc-border));
  border-radius: 5px;
  background: color-mix(in srgb, var(--rlc-panel-strong) 92%, #000000 8%);
  transition: 160ms ease;
  flex: 0 0 auto;
}

.rlc-phase-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
  opacity: 0;
}

.rlc-phase-option input:checked + .rlc-phase-box {
  border-color: transparent;
  background: linear-gradient(135deg, #cb5347 0%, #8f231e 100%);
  box-shadow: 0 10px 18px rgba(171, 49, 38, 0.24);
}

.rlc-phase-option input:checked + .rlc-phase-box::after {
  opacity: 1;
}

.rlc-phase-text {
  color: var(--rlc-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.rlc-graph-header p {
  margin: 0;
  color: var(--rlc-text-soft);
}

.rlc-graph-shell {
  position: relative;
  margin-top: 16px;
  min-height: 320px;
  border: 1px solid var(--rlc-border);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--rlc-accent) 10%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--rlc-panel-strong) 94%, #000000 6%) 0%, color-mix(in srgb, var(--rlc-bg) 96%, #000000 4%) 100%);
}

.rlc-graph-canvas {
  display: block;
  width: 100%;
  height: 320px;
}

.rlc-graph-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--rlc-text-soft);
  font-size: 0.94rem;
  text-align: center;
  background: color-mix(in srgb, var(--rlc-bg) 42%, transparent);
  transition: opacity 160ms ease;
}

.rlc-graph-placeholder.is-hidden {
  opacity: 0;
  pointer-events: none;
}

body.light-mode .rlc-card {
  --rlc-theme-surface: var(--color-surface, #ffffff);
  --rlc-theme-surface-hover: var(--color-surface-hover, #f8f7f2);
  --rlc-theme-text: var(--color-text, #4a4a4a);
  --rlc-theme-heading: var(--color-heading, #0a0a0a);
  --rlc-theme-border: var(--color-border, #dddbd0);
  --rlc-theme-border-light: var(--color-border-light, #c8c5b8);
  --rlc-theme-accent: var(--color-accent, #7a4f1a);
  --rlc-bg: color-mix(in srgb, var(--rlc-theme-surface) 96%, #e7e2d6 4%);
  --rlc-panel: color-mix(in srgb, var(--rlc-theme-surface-hover) 96%, #e5dfd1 4%);
  --rlc-panel-strong: color-mix(in srgb, var(--rlc-theme-surface) 90%, #d8d1c3 10%);
  --rlc-text: var(--rlc-theme-text);
  --rlc-text-soft: color-mix(in srgb, var(--rlc-text) 68%, transparent);
  --rlc-border: color-mix(in srgb, var(--rlc-theme-border-light) 88%, transparent);
  --rlc-accent: color-mix(in srgb, var(--rlc-theme-accent) 92%, #ffffff 8%);
  --rlc-accent-soft: color-mix(in srgb, var(--rlc-theme-accent) 10%, var(--rlc-bg));
  background: linear-gradient(180deg, var(--rlc-bg) 0%, color-mix(in srgb, var(--rlc-bg) 96%, #d9d3c6 4%) 100%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.06);
}

body.light-mode .rlc-card .rlc-equation-badge,
body.light-mode .rlc-card .rlc-unit-button,
body.light-mode .rlc-card .rlc-inline-field input,
body.light-mode .rlc-card .rlc-phase-box {
  background: color-mix(in srgb, var(--rlc-theme-surface) 96%, #ece7dc 4%);
}

body.light-mode .rlc-card .rlc-phase-option input:checked + .rlc-phase-box {
  border-color: transparent;
  background: linear-gradient(135deg, #cb5347 0%, #8f231e 100%);
  box-shadow: 0 10px 18px rgba(171, 49, 38, 0.24);
}

body.light-mode .rlc-card .rlc-unit-button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--rlc-theme-accent) 0%, color-mix(in srgb, var(--rlc-theme-accent) 82%, #5c3a10 18%) 100%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--rlc-theme-accent) 18%, transparent);
}

@media (max-width: 860px) {
  .rlc-control-grid {
    grid-template-columns: 1fr;
  }

  .rlc-summary-panel {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .rlc-card {
    padding: 18px;
    border-radius: 18px;
  }

  .rlc-inline-field {
    grid-template-columns: 1fr;
  }

  .rlc-graph-card {
    padding: 14px;
  }

  .rlc-graph-shell,
  .rlc-graph-canvas {
    min-height: 280px;
    height: 280px;
  }
}