: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; }
}

/* APP 母版适配层：网页主界面以 Android APP 已验收布局为准。 */
:root {
  color-scheme: light;
  --gold: #b48226;
  --panel: rgba(255,255,255,.94);
}
html, body { background: #fff; }
.app { background: #fff; }
.app.camera-active { background: #000; }
.app::after { content: none; }
.fallback { color:#666; background:#fff; }

.app-title {
  position:absolute;
  z-index:7;
  left:50%;
  top:max(8px, env(safe-area-inset-top));
  transform:translateX(-50%);
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#96671b;
  font:700 16px/1 Georgia,"Songti SC","SimSun",serif;
  letter-spacing:.12em;
  text-shadow:0 1px 1px rgba(90,55,15,.18);
  white-space:nowrap;
  pointer-events:none;
}
.top-action,.floating-lock {
  position:absolute;
  z-index:9;
  border:1px solid #d3a942;
  border-radius:22px;
  background:rgba(47,58,64,.88);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  font-weight:600;
}
.calibration-button {
  left:10px;
  top:max(8px, env(safe-area-inset-top));
  min-width:64px;
  height:40px;
}
.floating-lock {
  right:8px;
  top:58vh;
  width:72px;
  height:42px;
  opacity:.9;
}
.floating-lock:disabled { opacity:.38; }

.front-bearing {
  top:calc(max(8px, env(safe-area-inset-top)) + 44px);
  color:#444;
  text-shadow:none;
}
.front-bearing strong { color:#b48226; font-size:clamp(20px,5.6vw,28px); }
.front-bearing b:first-of-type { color:#444; font-size:clamp(15px,4.3vw,20px); }
.front-bearing b:last-of-type { color:#b48226; font-size:clamp(24px,7vw,34px); }
.app.camera-active .front-bearing { color:#fff; text-shadow:0 1px 3px #000,0 0 8px #000; }
.app.camera-active .front-bearing b:first-of-type { color:#fff; }

.stage { inset:98px 0 124px; }
.plate-rotor img { opacity:1; filter:none; }
.instrument.enhanced .plate-rotor img { filter:contrast(1.35) saturate(1.06); }
.app.camera-active .instrument.enhanced .plate-rotor img {
  filter:contrast(1.45) saturate(1.12) drop-shadow(0 0 1px #fff);
}

.settings {
  top:96px;
  right:10px;
  width:min(300px,calc(100% - 20px));
  padding:16px;
  border:1px solid #d8d8d8;
  border-radius:12px;
  background:rgba(255,255,255,.98);
  box-shadow:0 10px 34px rgba(0,0,0,.2);
  backdrop-filter:none;
}
.settings label { color:#444; font-size:14px; margin:10px 0; }
.settings input[type="range"] { accent-color:#b48226; }
.mini-button { color:#7b5514; border-color:#c99c36; background:#fffaf0; }

.analysis-sheet { color:#333; background:rgba(255,255,255,.98); }
.analysis-head strong,.person-card strong { color:#8e641d; }
.analysis-head .close-button { color:#555; background:#f5f5f5; }
.analysis-tip,.analysis-sheet label,.person-list-head { color:#666; }
.case-tabs label { color:#825b18; background:#fffaf0; }
.analysis-sheet input,.analysis-sheet textarea,.analysis-sheet select {
  color:#333;
  background:#fff;
  border-color:#ddd;
}
.location-text { color:#555; background:#fafafa; border-color:#ddd; }
.person-card { background:#faf8f3; border-color:#e8e0d2; }
.analysis-report { color:#333; background:#f8f8f8; }

.measure-panel {
  left:0;
  right:0;
  bottom:0;
  padding:8px 12px max(8px,env(safe-area-inset-bottom));
  border-top:1px solid #e2e2e2;
  background:var(--panel);
  box-shadow:0 -3px 14px rgba(0,0,0,.08);
  backdrop-filter:none;
}
.actions { grid-template-columns:repeat(2,1fr); }
.secondary { color:#6b4a12; border-color:#c99c36; background:#fff; }
.analysis-entry {
  width:100%;
  min-height:46px;
  margin-top:7px;
  border-radius:22px;
  font-weight:700;
}
.notice { margin:5px 0 0; color:#888; }

@media (orientation:landscape) {
  .stage { inset:98px 0 116px; }
  .measure-panel { left:0; right:0; top:auto; bottom:0; width:auto; }
  .actions { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .settings { top:96px; }
  .stage { inset:98px 0 118px; }
  .app-title { font-size:15px; }
  .calibration-button { min-width:58px; }
  .floating-lock { width:68px; }
}