:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #090b12; color: #f8fafc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 22% 8%, rgba(239, 67, 80, .17), transparent 31rem), radial-gradient(circle at 87% 18%, rgba(39, 179, 213, .17), transparent 25rem), #090b12; }
.shell { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 64px 0 40px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -.045em; }
h2 { margin: 0; font-size: 1.25rem; }
.intro { max-width: 700px; color: #aab5ca; font-size: 1.05rem; line-height: 1.65; }
.eyebrow { color: #f86b72; font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.card { margin-top: 28px; padding: 28px; border: 1px solid #2c3446; border-radius: 22px; background: rgba(19, 23, 34, .86); box-shadow: 0 24px 70px rgba(0, 0, 0, .26); }
.card-heading { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.read-only { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #365b4a; border-radius: 99px; color: #82e0b0; font-size: .78rem; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }
.button { min-height: 45px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; color: #fff; font: inherit; font-weight: 750; cursor: pointer; text-decoration: none; }
.button.primary { background: linear-gradient(135deg, #e2344b, #ff6157); box-shadow: 0 10px 24px rgba(226, 52, 75, .25); }
.button.secondary { border-color: #47536d; background: #202738; }
.button.subtle { margin-top: 10px; border-color: #47536d; background: transparent; }
.file-button { cursor: pointer; }
.hint, footer { color: #93a1bb; font-size: .92rem; line-height: 1.55; }
.manual-form { display: grid; gap: 9px; margin-top: 26px; }
label { color: #d9e0ec; font-size: .9rem; font-weight: 700; }
textarea { width: 100%; min-height: 92px; resize: vertical; border: 1px solid #47536d; border-radius: 12px; background: #101520; color: #f8fafc; padding: 12px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.manual-form .button { justify-self: start; margin-top: 3px; }
.camera-panel { margin-top: 18px; padding: 12px; border: 1px solid #3b455b; border-radius: 16px; background: #070a10; }
video { display: block; width: min(100%, 520px); max-height: 390px; margin: 0 auto; border-radius: 10px; background: #000; }
.result, .audit-result { margin-top: 20px; padding: 16px; border: 1px solid #3e4b65; border-radius: 14px; background: #131a29; color: #dce5f4; white-space: pre-line; line-height: 1.6; }
.result.success { border-color: #23855d; background: rgba(15, 89, 59, .24); color: #a6f5cb; }
.result.warning { border-color: #b7862f; background: rgba(117, 73, 10, .22); color: #ffe1a0; }
.result.danger { border-color: #b14c5b; background: rgba(111, 27, 40, .28); color: #ffb6bd; }
footer { margin: 30px 4px 0; }
@media (max-width: 560px) { .shell { width: min(100% - 24px, 920px); padding-top: 36px; } .card { padding: 20px; border-radius: 18px; } .card-heading { gap: 12px; } .read-only { font-size: .7rem; } .button { width: 100%; } .manual-form .button { width: 100%; } }