.refraction-stage { padding-bottom: 24px; }

.refraction-status { flex-wrap: wrap; gap: 7px 16px; margin-bottom: 14px; }
.refraction-status strong { color: var(--orange); font: 500 12px "DM Mono", monospace; }
.refraction-status #stateText { color: #dcebe8; font-family: Manrope, "Microsoft YaHei", sans-serif; font-weight: 600; }
.refraction-status #statusTime { margin-left: auto; }

.refraction-canvas { min-width: 0; overflow: hidden; border: 1px solid var(--line-soft); background: var(--panel-deep); }
.refraction-scene { display: block; width: 100%; height: auto; }

.medium-label { fill: #71918f; font: 11px "DM Mono", monospace; }
.interface-line { stroke: #78908d; stroke-width: 2.5; }
.normal-line { stroke: #66817e; stroke-width: 1.4; stroke-dasharray: 6 6; }

.ray { stroke: var(--cyan); stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(101, 230, 209, .35)); }
.ray-reflect { opacity: .5; }
.ray-reflect.strong { opacity: 1; }
.critical-ray { stroke: var(--yellow); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .85; }

.angle-arc { fill: none; stroke-width: 1.6; }
.arc-incident { stroke: var(--orange); }
.arc-reflect { stroke: #78908d; }
.arc-refract { stroke: var(--cyan); }
.angle-label { font: 500 12px "DM Mono", monospace; paint-order: stroke; stroke: var(--panel-deep); stroke-width: 5px; stroke-linejoin: round; }
.t1-label { fill: var(--orange); }
.t1r-label { fill: #9db8b5; }
.t2-label { fill: var(--cyan); }
.tc-label { fill: var(--yellow); }

.pulse { fill: var(--orange); stroke: #fff1d8; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(255, 173, 104, .7)); }

.refraction-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.refraction-metrics .metric:nth-child(n+4) { margin-top: 13px; padding-top: 17px; border-top: 1px solid var(--line); }
.refraction-metrics .metric:nth-child(4) { padding-left: 0; border-left: 0; }
.refraction-metrics .metric-value { font-size: 18px; line-height: 1.4; }
.refraction-metrics .metric-value.compact, .metric-value-compact { font-size: 15px; }

@media (max-width: 820px) {
  .refraction-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .refraction-metrics .metric:nth-child(n+3) { margin-top: 13px; padding-top: 17px; border-top: 1px solid var(--line); }
  .refraction-metrics .metric:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 560px) {
  .refraction-status #statusTime { margin-left: 0; }
  .refraction-status span, .refraction-status strong { display: block; flex-basis: 100%; }
  .angle-label { font-size: 14px; stroke-width: 6px; }
  .medium-label { font-size: 13px; }
  .refraction-scene .annotation, .refraction-scene .axis-label { font-size: 13px; }
  .refraction-metrics { grid-template-columns: 1fr; }
  .refraction-metrics .metric, .refraction-metrics .metric:nth-child(n) { margin-top: 0; padding: 13px 0; border-right: 0; border-bottom: 1px solid var(--line); border-left: 0; }
  .refraction-metrics .metric:last-child { border-bottom: 0; }
}