:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172033; background: #f3f5f9; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.shell { max-width: 1130px; margin: auto; padding: 56px 28px 24px; }
.app-navigation { max-width: 1130px; margin: auto; padding: 16px 28px 0; display: flex; justify-content: space-between; align-items: center; }
.app-navigation a { color: #4f46e5; font-size: 13px; text-decoration: none; }
.app-navigation .app-brand { display: flex; align-items: center; font-size: 16px; font-weight: 750; letter-spacing: .12em; color: #172033; }
.app-brand img { margin-left: -6px; }
.page-header { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.eyebrow { text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 700; color: #62708a; margin: 0 0 15px; }
h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -.035em; font-weight: 650; margin: 0 0 19px; }
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.025em; margin: 0; }
h3 { font-size: 17px; font-weight: 650; margin: 0 0 8px; }
p { font-size: 14px; line-height: 1.65; }
.intro { color: #62708a; font-size: 15px; margin-bottom: 0; }
.muted { color: #6b768b; font-size: 13px; }
.account { display: flex; align-items: center; gap: 12px; align-self: flex-start; font-size: 12px; color: #62708a; }
.account span { overflow-wrap: anywhere; max-width: 230px; }
.dashboard { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); gap: 24px; align-items: start; }
.main-column { display: grid; gap: 24px; }
.card { background: white; border: 1px solid #e5e9f1; border-radius: 18px; padding: 27px; box-shadow: 0 3px 10px #14204703; }
.auth-card { max-width: 480px; }
.section-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.step { color: #a0aec0; font-size: 11px; font-variant-numeric: tabular-nums; border: 1px solid #e5e9f1; border-radius: 50%; width: 27px; height: 27px; display: grid; place-items: center; }
.form { display: grid; gap: 17px; margin-top: 23px; }
label { display: grid; gap: 8px; font-size: 12px; font-weight: 650; color: #45506a; }
input, select { font: inherit; font-size: 14px; color: #172033; padding: 12px 14px; border: 1px solid #dce1ec; background: #fff; border-radius: 10px; min-width: 0; width: 100%; }
input::placeholder { color: #8a95a8; }
input:focus, select:focus { outline: 2px solid #c6c5ff; outline-offset: 2px; }
.button { border: 1px solid #dce1ec; border-radius: 10px; background: #fff; color: #46526c; padding: 12px 17px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s, border .15s; }
.button:hover { background: #f4f6fa; border-color: #c5ccd9; }
.button:focus-visible, .text-button:focus-visible, .report-name:focus-visible { outline: 3px solid #c6c5ff; outline-offset: 3px; }
.button:disabled { opacity: .5; cursor: not-allowed; }
.primary { color: white; background: #4f46e5; border-color: #4f46e5; }
.primary:hover { background: #4338ca; border-color: #4338ca; }
.green { color: white; background: #059669; border-color: #059669; }
.green:hover { background: #047857; border-color: #047857; }
.danger { color: #b53f53; background: #fff4f6; border-color: #f6d7df; }
.subtle { background: transparent; }
.small { padding: 7px 11px; font-size: 11px; border-radius: 8px; }
.full-width { width: 100%; margin-top: 18px; }
.text-button { color: #4f46e5; border: 0; background: transparent; padding: 0; font: inherit; font-size: 12px; text-align: left; width: fit-content; cursor: pointer; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.button-row .button { flex: 1; }
.camera-label { margin-top: 22px; }
.fine-print { font-size: 11px; color: #8a95a8; margin: 12px 0 0; line-height: 1.65; }
.report-list { display: grid; gap: 10px; margin-top: 21px; }
.report-row { padding: 14px; border-radius: 11px; background: #f6f8fc; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 13px; }
.report-row span { color: #6b768b; font-size: 12px; white-space: nowrap; }
.report-name { text-align: left; color: #172033; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.report-name:hover { color: #4f46e5; }
.empty { background: #f6f8fc; border-radius: 11px; padding: 20px 14px; color: #8a95a8; font-size: 12px; margin: 0; }
.report-divider { border-top: 1px solid #edf0f6; margin: 28px 0 25px; }
.activity-row { display: block; }
.activity-row strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; overflow-wrap: anywhere; }
.activity-row .active-label { color: #059669; }
.notice { border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 11px; padding: 13px 17px; margin: 0 0 24px; color: #3730a3; }
.notice.error { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.pending-panel { border: 1px solid #fde68a; background: #fffbeb; padding: 14px; border-radius: 11px; margin-top: 20px; }
.pending-panel p { margin-top: 0; font-size: 12px; }
.pending-panel .fine-print { margin-bottom: 0; font-size: 11px; }
.live-card { padding: 22px; }
.live-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 0 4px #d1fae5; margin-right: 5px; }
.video-wrap { background: #172033; overflow: hidden; border-radius: 11px; position: relative; margin-top: 20px; min-height: 180px; }
video { display: block; width: 100%; transform: scaleX(-1); }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1); pointer-events: none; }
.live-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; border-top: 1px solid #edf0f6; padding: 18px 0; }
.live-stats span, .live-stats strong { display: block; }
.live-stats span { font-size: 11px; }
.live-stats strong { font-size: 16px; margin-top: 5px; font-weight: 600; overflow-wrap: anywhere; }
.user-dialog { width: min(700px, calc(100% - 30px)); max-height: 85vh; border: 1px solid #e5e9f1; border-radius: 18px; padding: 28px; color: #172033; }
.user-dialog::backdrop { background: #17203380; backdrop-filter: blur(3px); }
.user-dialog h3 { margin-top: 28px; }
.session-list { display: grid; gap: 10px; margin-top: 15px; }
.session-row { border: 1px solid #e5e9f1; border-radius: 10px; padding: 14px; }
.session-row p { margin: 0; }
.session-row .muted { font-size: 12px; margin-top: 6px; }
footer { text-align: center; color: #9aa5b7; font-size: 11px; padding: 36px 0 12px; }
footer .footer-rights { text-align: left; border-top: 1px solid #e5e9f1; margin-top: 20px; padding-top: 18px; color: #65718a; font-size: 12px; line-height: 1.8; }
.footer-rights p { margin: 0; overflow-wrap: anywhere; }
.footer-rights .copyright { font-weight: 650; color: #26324b; margin-bottom: 6px; }
code { font-size: 12px; background: #f3f5f9; border-radius: 4px; padding: 2px 4px; }
.card a.button { display: inline-block; text-decoration: none; }
details { margin-top: 18px; font-size: 13px; line-height: 1.6; }
summary { cursor: pointer; color: #4f46e5; font-weight: 600; }
#extension-feed { font-size: 11px; letter-spacing: 0; text-align: right; width: auto; height: auto; max-width: 140px; border: 0; border-radius: 0; line-height: 1.4; }
@media (max-width: 800px) { .dashboard { grid-template-columns: 1fr; } .page-header { flex-direction: column; gap: 20px; } .shell { padding: 35px 18px 20px; } .card { padding: 22px; } .account { align-self: stretch; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }