:root { color-scheme: dark; font-family: system-ui, "Microsoft YaHei", sans-serif; background: #10151d; color: #eef2f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: radial-gradient(circle at 20% 0%, #26364d, #10151d 55%); }
.shell { width: min(960px, 100%); margin: 0 auto; padding: 32px 18px 56px; }
.eyebrow { color: #8fb8ff; letter-spacing: .16em; font-size: 12px; }
h1 { margin: 8px 0; font-size: clamp(28px, 6vw, 48px); }
.intro { color: #aeb9c8; }
.camera-card, .advice-card { margin-top: 24px; padding: 16px; border: 1px solid #35465d; border-radius: 16px; background: rgba(19, 28, 41, .88); }
.camera-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #080b10; }
video { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; background: #080b10; }
.screen-guide { position: absolute; left: 50%; top: 50%; width: 94%; aspect-ratio: 16 / 9; height: auto; transform: translate(-50%, -50%); border: 2px dashed rgba(143,184,255,.82); border-radius: 8px; pointer-events: none; display: grid; place-items: end center; }
.screen-guide span { margin-bottom: 8px; padding: 4px 8px; border-radius: 999px; color: #dce9ff; background: rgba(8,17,30,.72); font-size: 12px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
button { border: 0; border-radius: 9px; padding: 11px 15px; color: #08111e; background: #8fb8ff; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
.secondary { color: #d8e2ef; background: #29394d; }
#status { color: #aeb9c8; }
#status[data-kind="success"] { color: #9de2bb; }
#status[data-kind="error"] { color: #ff9f9f; }
.session-info { color: #8fb8ff; font-size: 13px; }
.toast { margin-top: 12px; padding: 11px 13px; border-radius: 10px; color: #d8e2ef; background: #26394f; line-height: 1.45; }
.toast[data-kind="success"] { color: #b5f0cc; background: #1b3a35; }
.toast[data-kind="error"] { color: #ffd0d0; background: #4a2930; }
.correction-trigger { margin-top: 10px; }
.live-advice { margin: 16px 0 0; padding: 14px; background: #18283b; }
.live-advice h2 { margin: 0 0 8px; font-size: 18px; }
.live-advice pre { margin: 0; min-height: 74px; }
.correction-panel summary { cursor: pointer; color: #b9c7d8; font-weight: 700; }
.correction-panel[hidden] { display: none; }
.correction-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:12px 0; }
label { display:grid; gap:5px; color:#b9c7d8; font-size:13px; }
input, select { width:100%; padding:9px; border:1px solid #405570; border-radius:8px; color:#eef2f7; background:#0d1520; }
a { color: #9fc4ff; }
pre { white-space: pre-wrap; color: #d8e2ef; line-height: 1.7; }
@media (max-width: 640px) { .shell { padding: 18px 12px 34px; } h1 { font-size: 30px; } video { aspect-ratio: 16 / 9; } .controls button { flex: 1 1 140px; min-height: 44px; } .camera-card, .advice-card { margin-top: 14px; padding: 13px; } }