.trc-root {
  --trc-bg: #f7f8f6;
  --trc-panel: #fff;
  --trc-ink: #1c211f;
  --trc-muted: #68726d;
  --trc-border: #d9ded8;
  --trc-field: #eef2ee;
  --trc-accent: #126c66;
  --trc-safe: #16865d;
  --trc-warn: #b7791f;
  --trc-danger: #c83c2f;

  color: var(--trc-ink);
}

.theme-dark .trc-root {
  --trc-bg: #0f1117;
  --trc-panel: #171a22;
  --trc-ink: #f1f4f0;
  --trc-muted: #9da6b2;
  --trc-border: #303543;
  --trc-field: #20242f;
  --trc-accent: #8aa7ff;
  --trc-safe: #6fd6a7;
  --trc-warn: #d8b35c;
  --trc-danger: #e1776c;
}

.trc-shell {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  gap: 0.8rem;
  width: 100%;
  padding: clamp(0.65rem, 2vw, 1rem);
  border: 1px solid var(--trc-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--trc-accent), transparent 88%), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--trc-panel), transparent 58%), transparent 11rem),
    var(--trc-bg);
}

.theme-dark .trc-shell {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 48px rgba(0, 0, 0, 0.28);
}

.trc-controls,
.trc-preflight,
.trc-main-panel,
.trc-safety {
  border: 1px solid var(--trc-border);
  border-radius: 8px;
  background: var(--trc-panel);
}

.theme-dark .trc-controls,
.theme-dark .trc-preflight,
.theme-dark .trc-main-panel,
.theme-dark .trc-safety {
  background: linear-gradient(180deg, #1a1e27, #151821);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.trc-controls {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: 0.75rem;
}

.trc-units {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.trc-controls fieldset {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0 0 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--trc-border);
}

.trc-controls fieldset:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.trc-controls legend,
.trc-controls label > span,
.trc-preflight span,
.trc-output-grid span,
.trc-safety span {
  color: var(--trc-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trc-controls label {
  display: grid;
  gap: 0.25rem;
}

.trc-controls label > span {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.trc-controls small {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--trc-accent);
  color: #fff;
}

.trc-controls input,
.trc-controls select,
.trc-units button {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--trc-border);
  border-radius: 4px;
  background: var(--trc-field);
  color: var(--trc-ink);
  font: inherit;
  font-weight: 760;
  padding: 0.5rem 0.58rem;
}

.trc-controls select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--trc-muted) 50%),
    linear-gradient(135deg, var(--trc-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 50%,
    calc(100% - 0.72rem) 50%;
  background-repeat: no-repeat;
  background-size: 0.34rem 0.34rem;
  padding-right: 2.25rem;
}

.trc-controls label b {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  align-items: center;
}

.trc-controls em {
  color: var(--trc-muted);
  font-style: normal;
  font-weight: 850;
}

.trc-units button {
  cursor: pointer;
}

.trc-units button.active {
  border-color: var(--trc-accent);
  background: var(--trc-accent);
  color: #fff;
}

.theme-dark .trc-units button.active {
  color: #111521;
}

.trc-controls input:focus,
.trc-controls select:focus,
.trc-units button:focus {
  outline: 2px solid var(--trc-safe);
  outline-offset: 1px;
}

.trc-results {
  display: grid;
  grid-template-columns: minmax(14rem, 0.78fr) minmax(0, 1.22fr);
  gap: 0.65rem;
}

.trc-preflight {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 0.75rem;
  border-left: 5px solid var(--trc-accent);
}

.trc-preflight strong {
  font-size: 1.05rem;
  line-height: 1.25;
}

.trc-preflight p {
  margin: 0;
  color: var(--trc-danger);
  font-weight: 780;
  line-height: 1.4;
}

.trc-preflight ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trc-preflight li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem;
  align-items: start;
  color: var(--trc-ink);
  font-weight: 720;
}

.trc-main-panel {
  display: grid;
  grid-template-columns: minmax(11rem, 0.72fr) minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.75rem;
}

.trc-meter {
  display: grid;
  place-items: center;
  min-height: 14rem;
  border-radius: 6px;
  background: var(--trc-field);
}

.theme-dark .trc-meter {
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--trc-accent), transparent 72%), transparent 7.5rem),
    linear-gradient(180deg, #242936, #1c202a);
}

.trc-meter svg {
  width: min(100%, 16rem);
}

.trc-arc-bg,
.trc-arc {
  fill: none;
  stroke-linecap: round;
  stroke-width: 14;
}

.trc-arc-bg {
  stroke: color-mix(in srgb, var(--trc-muted), transparent 70%);
}

.trc-arc {
  stroke: var(--trc-safe);
  stroke-dasharray: 242;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.18s ease, stroke 0.18s ease;
}

.trc-root[data-safety="caution"] .trc-arc {
  stroke: var(--trc-warn);
}

.trc-root[data-safety="limit"] .trc-arc {
  stroke: var(--trc-danger);
}

.trc-lamp {
  fill: var(--trc-accent);
}

.trc-rays {
  fill: none;
  stroke: color-mix(in srgb, var(--trc-accent), transparent 30%);
  stroke-linecap: round;
  stroke-width: 5;
}

.trc-meter b {
  margin-top: -3.4rem;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1;
}

.trc-meter small {
  margin-top: -1rem;
  color: var(--trc-muted);
  font-weight: 850;
}

.trc-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.trc-output-grid article {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.65rem;
  border-radius: 6px;
  background: var(--trc-field);
}

.theme-dark .trc-output-grid article {
  background: #202431;
}

.trc-output-grid b {
  font-size: 1.35rem;
}

.trc-output-grid small {
  margin-left: 0.18rem;
  color: var(--trc-muted);
  font-size: 0.76rem;
}

.trc-output-grid p {
  margin: 0.15rem 0 0;
  color: var(--trc-muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
}

.trc-safety {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.45rem;
  padding: 0.75rem;
  border-left: 5px solid var(--trc-safe);
}

.trc-root[data-safety="caution"] .trc-safety {
  border-left-color: var(--trc-warn);
}

.trc-root[data-safety="limit"] .trc-safety {
  border-left-color: var(--trc-danger);
}

.trc-safety b {
  font-size: 1.25rem;
}

.trc-safety p {
  margin: 0;
  line-height: 1.4;
}

.trc-safety progress {
  width: 100%;
  height: 0.75rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--trc-field);
}

.trc-safety progress::-webkit-progress-bar {
  background: var(--trc-field);
}

.trc-safety progress::-webkit-progress-value {
  background: var(--trc-safe);
}

.trc-root[data-safety="caution"] .trc-safety progress::-webkit-progress-value {
  background: var(--trc-warn);
}

.trc-root[data-safety="limit"] .trc-safety progress::-webkit-progress-value {
  background: var(--trc-danger);
}

@media (max-width: 920px) {
  .trc-shell,
  .trc-results,
  .trc-main-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .trc-shell,
  .trc-controls,
  .trc-main-panel {
    padding: 0.58rem;
  }

  .trc-output-grid {
    grid-template-columns: 1fr;
  }
}