:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #f8fafc; background: #061310; --teal: #2dd4bf; --panel: #0e2420; --muted: #9db5b0; }
* { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; background: #061310; }
button { font: inherit; }
.photo-app { width: min(100%, 720px); min-height: 100vh; margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% -20%, #164e45 0, #061310 44%); }
.photo-header { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 5px 2px 14px; }
.back-link { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(148,163,184,.22); border-radius: 13px; background: rgba(15,43,37,.82); color: white; text-decoration: none; font-size: 22px; }
.photo-header h1 { margin: 0; font-size: 19px; line-height: 1.2; }
.photo-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(45,212,191,.3); border-radius: 999px; padding: 6px 9px; background: rgba(20,184,166,.1); color: #99f6e4; font-size: 11px; font-weight: 700; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 5px rgba(45,212,191,.1); animation: pulse 1.7s infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.8); } }

.camera-stage { position: relative; overflow: hidden; height: min(36vh, 340px); min-height: 240px; border: 1px solid rgba(94,234,212,.28); border-radius: 24px; background: #020807; box-shadow: 0 24px 65px rgba(0,0,0,.35); }
#camera { width: 100%; height: 100%; display: block; object-fit: cover; }
.camera-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)); }
.scan-frame { position: absolute; inset: 10% 6% 13%; border: 1px solid rgba(153,246,228,.5); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0,0,0,.32); pointer-events: none; }
.scan-frame > b { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; border-radius: 999px; padding: 5px 10px; background: rgba(4,47,46,.78); color: #ccfbf1; font-size: 11px; font-weight: 650; }
.corner { position: absolute; width: 29px; height: 29px; border-color: var(--teal); border-style: solid; }
.top-left { top: -2px; left: -2px; border-width: 3px 0 0 3px; border-radius: 15px 0 0; }
.top-right { top: -2px; right: -2px; border-width: 3px 3px 0 0; border-radius: 0 15px 0 0; }
.bottom-left { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; border-radius: 0 0 0 15px; }
.bottom-right { right: -2px; bottom: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 15px; }
.scan-line { position: absolute; left: 3%; right: 3%; top: 14%; height: 1px; background: linear-gradient(90deg, transparent, #5eead4, transparent); box-shadow: 0 0 12px #2dd4bf; animation: scan 2.8s ease-in-out infinite; }
@keyframes scan { 50% { top: 82%; } }
.camera-error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 28px; background: #071a18; text-align: center; }
.camera-error[hidden] { display: none; }
.camera-error p { margin: 8px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.camera-error button { border: 0; border-radius: 11px; padding: 10px 16px; background: var(--teal); color: #042f2e; font-weight: 800; }
.camera-stage.paused::after { content: "扫描已暂停 · 摄像头已关闭"; position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,8,7,.92); color: #ccfbf1; text-align: center; font-size: 14px; font-weight: 750; }

.camera-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.control-button { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; border: 1px solid rgba(148,163,184,.18); border-radius: 14px; padding: 10px 12px; background: rgba(14,36,32,.92); color: #f0fdfa; text-align: left; cursor: pointer; }
.control-button > span { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(45,212,191,.12); color: #5eead4; font-size: 16px; font-weight: 850; }
.control-button b { font-size: 12px; }
.control-button small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.control-button.active { border-color: rgba(45,212,191,.62); background: rgba(15,118,110,.26); }
.control-button:disabled { opacity: .42; cursor: default; }

.recognition-status { margin-top: 12px; border: 1px solid rgba(148,163,184,.14); border-radius: 16px; padding: 13px 14px; background: rgba(14,36,32,.9); }
.status-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #f59e0b; }
.status-dot.ready { background: #2dd4bf; }
#confidence { margin-left: auto; color: #99f6e4; font-size: 11px; }
.progress-track { overflow: hidden; height: 3px; margin-top: 10px; border-radius: 99px; background: rgba(148,163,184,.15); }
#progress-bar { width: 8%; height: 100%; display: block; border-radius: inherit; background: var(--teal); transition: width .2s; }
.recognition-status p { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.photo-result { margin-top: 12px; }
.waiting-card, .answer-card { border: 1px solid rgba(94,234,212,.2); border-radius: 20px; padding: 19px; background: linear-gradient(145deg, rgba(15,118,110,.23), rgba(14,36,32,.94)); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.waiting-card { display: grid; justify-items: center; padding: 28px 18px; text-align: center; }
.waiting-card > span { color: var(--teal); font-size: 38px; }
.waiting-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.answer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #b7ccc7; font-size: 11px; }
.answer-meta b { border-radius: 999px; padding: 4px 8px; background: #0f766e; color: white; }
.answer-question { margin: 12px 0 0; font-size: 16px; line-height: 1.55; }
.answer-line { margin-top: 15px; border-radius: 15px; padding: 14px 15px; background: #14b8a6; color: #042f2e; }
.answer-line small, .answer-line strong { display: block; }
.answer-line small { font-size: 10px; font-weight: 750; }
.answer-line strong { margin-top: 3px; font-size: 21px; line-height: 1.35; }
.answer-options { display: grid; gap: 7px; margin-top: 13px; }
.answer-option { display: flex; gap: 9px; border: 1px solid rgba(148,163,184,.14); border-radius: 10px; padding: 9px 10px; color: #dbe8e5; font-size: 12px; line-height: 1.45; }
.answer-option.correct { border-color: rgba(45,212,191,.48); background: rgba(20,184,166,.12); color: #99f6e4; }
.answer-option b { flex: 0 0 auto; }
.alternatives { margin-top: 10px; display: grid; gap: 6px; }
.alternative { border-left: 2px solid rgba(45,212,191,.35); padding: 7px 10px; background: rgba(14,36,32,.68); color: #b7ccc7; font-size: 11px; line-height: 1.45; }
.alternative b { color: #f0fdfa; }
.recognized-panel { margin-top: 12px; border: 1px solid rgba(148,163,184,.14); border-radius: 14px; padding: 12px 14px; background: rgba(14,36,32,.7); color: var(--muted); font-size: 11px; }
.recognized-panel summary { cursor: pointer; }
.recognized-panel pre { margin: 10px 0 0; white-space: pre-wrap; color: #cbd5e1; font: inherit; line-height: 1.55; }
footer { padding: 22px 0 4px; text-align: center; font-size: 10px; }
footer a { color: #6f8c86; text-decoration: none; }

@media (max-width: 390px) {
  .photo-app { padding-left: 10px; padding-right: 10px; }
  .photo-header { grid-template-columns: 38px minmax(0,1fr) auto; }
  .back-link { width: 36px; height: 36px; }
  .photo-header h1 { font-size: 17px; }
  .photo-header p { display: none; }
  .live-pill { padding: 5px 7px; }
  .camera-stage { min-height: 225px; }
  .control-button { padding: 9px; }
}