:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  --gold: #e9c875;
  --red: #f13c32;
  --green: #55e39f;
  --panel: rgba(5, 8, 6, .76);
  --level-color: var(--red);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050806; }
button, input { font: inherit; }

.app {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #35463e 0, #101612 42%, #050806 100%);
}

#camera, .fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#camera { object-fit: cover; }
.fallback {
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: rgba(255,255,255,.8);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.05) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(255,255,255,.05) 50%, transparent 50.2%);
}
.fallback[hidden] { display: none; }
.fallback small { color: rgba(255,255,255,.5); }
.app::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0008, transparent 22%, transparent 68%, #000c); }

.stage, .settings, .measure-panel { position: absolute; z-index: 2; }
.icon-button { border: 1px solid #e9c87566; border-radius: 18px; padding: 8px 12px; color: var(--gold); background: #050806aa; }

.stage { inset: 96px 0 182px; display: grid; place-items: center; overflow: hidden; }
.stage.locked-view { touch-action: none; cursor: grab; }
.instrument {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(var(--plate-size, 104vw), 82vh);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translate(var(--view-x, 0px), var(--view-y, 0px)) scale(var(--view-scale, 1)) translateZ(0);
  transform-origin: 50% 50%;
}
.plate-rotor {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform-origin: 50% 50%;
}
.plate-rotor.mirrored {
  transform: scaleX(-1);
}
.plate-rotor img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--plate-opacity, 1);
  filter: contrast(1.12) drop-shadow(0 0 1px #fff) drop-shadow(0 2px 3px #000);
}
.instrument.enhanced .plate-rotor img {
  filter: contrast(1.45) saturate(1.12) drop-shadow(0 0 2px #fff) drop-shadow(0 2px 3px #000);
}
.crosshair { position: absolute; inset: 0; pointer-events: none; }
.crosshair i { position: absolute; display: block; background: var(--red); box-shadow: 0 0 3px #000; }
.crosshair .vertical { top: 0; bottom: 0; left: calc(50% - .5px); width: 1px; }
.crosshair .horizontal { left: 0; right: 0; top: calc(50% - .5px); height: 1px; }
.crosshair .target { left: calc(50% - 8px); top: calc(50% - 8px); width: 16px; height: 16px; border: 2px solid var(--red); border-radius: 50%; background: transparent; }
.level-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  max-width: 122px;
  min-width: 76px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--level-color) 68%, transparent);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.13), rgba(5,8,6,.72) 62%, rgba(0,0,0,.22) 100%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 0 14px color-mix(in srgb, var(--level-color) 42%, transparent);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.level-title { display: none; }
.level-vial {
  position: relative;
  width: 100%;
  height: 100%;
  grid-area: 1 / 1;
  border: 1.5px solid color-mix(in srgb, var(--level-color) 70%, #fff 30%);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), #ffffff33 calc(50% - 1px), #ffffff33 calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), #ffffff33 calc(50% - 1px), #ffffff33 calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(circle, #101712 0, #050806 70%);
}
.level-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 36%;
  transform: translate(-50%, -50%);
  border: 1px dashed color-mix(in srgb, var(--level-color) 85%, #fff 15%);
  border-radius: 50%;
}
.level-bubble {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  height: 24%;
  transform: translate(calc(-50% + var(--bubble-x, 0px)), calc(-50% + var(--bubble-y, 0px)));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffffff, var(--level-color) 45%, color-mix(in srgb, var(--level-color) 62%, #000) 100%);
  box-shadow: 0 0 13px color-mix(in srgb, var(--level-color) 78%, transparent);
}
.level-card strong {
  grid-area: 1 / 1;
  align-self: end;
  margin-bottom: 8%;
  padding: 1px 5px;
  border-radius: 10px;
  color: #fff;
  background: rgba(0,0,0,.46);
  font-size: clamp(9px, 2.2vw, 13px);
  line-height: 1.25;
}
.level-card small {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  min-width: 104px;
  padding: 2px 7px;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,.55);
  font-size: 10px;
  white-space: nowrap;
}
.level-card.ok { --level-color: var(--green); }
.level-card.warn { --level-color: var(--red); }

.front-bearing {
  position: absolute;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(96vw, 500px);
  min-height: 34px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(8px, 2.4vw, 18px);
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  text-align: center;
  color: #fff;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}
.front-bearing strong {
  display: inline;
  color: var(--gold);
  font-size: clamp(20px, 5.6vw, 30px);
  letter-spacing: .03em;
  line-height: 1;
  white-space: nowrap;
}
.front-bearing b:first-of-type { color: #fff; font-size: clamp(15px, 4.3vw, 22px); font-weight: 500; white-space: nowrap; }
.front-bearing b:last-of-type { color: var(--gold); font-size: clamp(24px, 7vw, 38px); line-height: 1; white-space: nowrap; }

.settings { top: 86px; right: 10px; width: min(290px, calc(100% - 20px)); padding: 12px; border: 1px solid #e9c87555; border-radius: 14px; background: #050806f0; backdrop-filter: blur(10px); }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; color: #eee; font-size: 12px; }
.settings input[type="range"] { width: 140px; accent-color: var(--gold); }
.settings select { width: 140px; border: 1px solid #e9c87566; border-radius: 10px; padding: 6px 8px; color: #f5ede0; background: #111512; }
.mini-button { width: 100%; margin-top: 8px; min-height: 34px; border: 1px solid #e9c87566; border-radius: 16px; color: var(--gold); background: #050806aa; }

.analysis-panel {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  align-items: end;
  background: rgba(0,0,0,.38);
}
.analysis-panel[hidden] { display: none; }
.analysis-sheet {
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 14px 14px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid #e9c87566;
  border-radius: 22px 22px 0 0;
  color: #f8f3e6;
  background: rgba(5,8,6,.96);
  box-shadow: 0 -8px 28px rgba(0,0,0,.45);
}
.analysis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.analysis-head strong { color: var(--gold); font-size: 18px; }
.close-button {
  width: 34px;
  height: 34px;
  border: 1px solid #ffffff33;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
}
.analysis-tip { margin: 0 0 10px; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.45; }
.case-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 10px; }
.case-tabs label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid #e9c87555;
  border-radius: 18px;
  color: var(--gold);
  background: rgba(255,255,255,.04);
}
.locked-summary {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 12px;
  color: #111;
  background: linear-gradient(135deg, #f5dea0, #c49231);
  font-weight: 800;
  text-align: center;
}
.analysis-sheet label {
  display: grid;
  gap: 5px;
  margin: 8px 0;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}
.analysis-sheet input,
.analysis-sheet textarea,
.analysis-sheet select {
  width: 100%;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  padding: 9px 10px;
  color: #fff;
  background: rgba(255,255,255,.08);
  resize: vertical;
}
.analysis-sheet select { appearance: auto; }
.location-box {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
}
.location-text {
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.07);
  font-size: 12px;
  line-height: 1.45;
}
.person-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 6px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}
.add-person { width: auto; min-width: 74px; margin: 0; padding: 0 10px; }
.person-list { display: grid; gap: 8px; }
.person-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.person-card strong { color: var(--gold); font-size: 13px; }
.person-row-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.remove-person {
  border: 0;
  color: #ffb4ad;
  background: transparent;
  font-size: 12px;
}
.lunar-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr 1fr;
  gap: 6px;
}
.lunar-grid select { padding: 8px 6px; font-size: 12px; }
.analyze-button { width: 100%; min-height: 42px; margin-top: 10px; border-radius: 22px; font-weight: 800; }
.analysis-report {
  margin: 12px 0 0;
  padding: 12px;
  max-height: 42vh;
  overflow: auto;
  border: 1px solid #e9c87544;
  border-radius: 14px;
  color: #f8f3e6;
  background: rgba(0,0,0,.34);
  white-space: pre-wrap;
  word-break: break-word;
  font: 13px/1.65 "Microsoft YaHei", "PingFang SC", sans-serif;
}

.measure-panel { left: 0; right: 0; bottom: 0; padding: 10px 18px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #e9c87555; background: var(--panel); backdrop-filter: blur(12px); }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actions button { min-height: 42px; border-radius: 22px; font-weight: 700; font-size: 13px; }
.secondary { color: var(--gold); border: 1px solid var(--gold); background: #050806aa; }
.primary { color: #201603; border: 0; background: linear-gradient(135deg, #f5dea0, #c49231); }
.primary:disabled { opacity: .45; }
.notice { margin: 8px 0 0; color: rgba(255,255,255,.45); text-align: center; font-size: 10px; }

@media (orientation: landscape) {
  .stage { inset: 96px 250px 18px 0; }
  .measure-panel { top: 100px; right: 0; bottom: 0; left: auto; width: 260px; }
  .actions { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .settings { right: 8px; left: 8px; width: auto; top: 86px; }
  .settings label { flex-wrap: wrap; }
  .settings input[type="range"], .settings select { width: 100%; }
  .stage { inset: 96px 0 142px; }
  .measure-panel { padding-left: 12px; padding-right: 12px; }
  .actions button { min-height: 42px; }
  .notice { font-size: 9px; line-height: 1.35; }
}