.viewer { max-width: 1550px; }.viewer .page-header { margin-bottom: 28px; }.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }.toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px; color: var(--muted); font-size: 13px; }#mode { margin-left: auto; padding: 7px 12px; border-radius: 20px; background: #e9e9ee; font-size: 12px; color: var(--muted); }.screen { position: relative; background: #000; border: 1px solid #d7d7de; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 35px #0000000a; }canvas { display: block; width: 100%; height: auto; aspect-ratio: 1024/600; touch-action: pan-y; cursor: default; }canvas.control { touch-action: none; cursor: crosshair; }#marker { display: none; position: absolute; width: 24px; height: 24px; margin: -12px; border: 2px solid #ff9f0a; border-radius: 50%; pointer-events: none; }.viewer footer { margin-top: 16px; }.hint { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }.error, #status.error { color: var(--red); }
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 28px 20px; background: #f5f5f7; }.login-card { margin: 0; width: 100%; max-width: 430px; border-radius: 24px; padding: 40px 36px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 48px #00000007; }.login-mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; color: white; background: var(--text); margin: 0 auto 20px; }.login-mark .icon { width: 32px; height: 32px; }.brand { color: var(--muted); font-size: 13px; font-weight: 500; text-align: center; }.login-card h1 { font-size: 28px; margin-top: 14px; text-align: center; }.login-card > .muted { text-align: center; font-size: 13px; line-height: 1.7; margin-top: 12px; }.login-card form { margin-top: 28px; }.login-card label { display: block; font-size: 13px; font-weight: 500; margin: 18px 0 8px; }.login-card input:not([type=hidden]) { min-height: 48px; background: #fafafc; }.login-card button { width: 100%; margin-top: 26px; min-height: 48px; }.login-card .error { font-size: 13px; padding-top: 16px; }.footnote { font-size: 11px; line-height: 1.6; text-align: center; color: var(--muted); margin: 24px 0 0; }
@media (max-width: 600px) { .screen { border-radius: 12px; }.toolbar { gap: 8px; }.toolbar .primary { flex: 1; }.toggle { padding-left: 0; }#mode { margin-left: auto; }.login-card { padding: 32px 24px; border-radius: 20px; }.login-card h1 { font-size: 26px; } }

.password-hint { margin-top: 8px; font-size: 12px; color: var(--muted); }
.login-card .password-logout { margin-top: 12px; }
.login-card .password-logout button { margin-top: 0; border: 0; color: var(--muted); }