/* Fovea (online mode): brand, login, start-up and information pages. Loaded after app.css on the main page. */
:root { --fv-accent: #1f5fae; --fv-ink: #1f1f1e; --fv-muted: #6b6b6b; --fv-bg: #f5f5f3; --fv-panel: #ffffff;
        --fv-line: #dddcd8; --fv-warn-bg: #fff1e0; --fv-warn-ink: #7a2e00; --fv-err: #c62828; }
.fv-logo { font-weight: 800; font-size: 20px; letter-spacing: .02em; color: var(--fv-accent); text-decoration: none; }
.fv-logo::before { content: ""; display: inline-block; width: .75em; height: .75em; margin-right: .35em;
                   border-radius: 50%; background: radial-gradient(circle, #0d2f57 0 22%, #fff 23% 42%, var(--fv-accent) 43%);
                   vertical-align: -.05em; }
.fv-topnav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.fv-topnav a { color: var(--fv-accent); }
.fv-topnav form { margin: 0; }
.fv-warn-inline { color: var(--fv-warn-ink); }
.fv-warn { background: var(--fv-warn-bg); color: var(--fv-warn-ink); border-left: 4px solid #d9822b; padding: 8px 12px;
           border-radius: 4px; }
body.fv { margin: 0; background: var(--fv-bg); color: var(--fv-ink);
          font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height: 100vh;
          display: flex; flex-direction: column; }
.fv-top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 12px 16px; background: var(--fv-panel);
          border-bottom: 1px solid var(--fv-line); }
.fv-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.fv-nav a, .fv-foot a, .fv-doc a, .fv-card a { color: var(--fv-accent); }
.fv-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.fv-foot { padding: 12px 16px; font-size: 12px; color: var(--fv-muted); border-top: 1px solid var(--fv-line);
           background: var(--fv-panel); text-align: center; }
.fv-card { background: var(--fv-panel); border: 1px solid var(--fv-line); border-radius: 8px; padding: 24px; max-width: 460px;
           margin: 24px auto; }
.fv-card h1, .fv-doc h1, .fv-start h1 { font-size: 24px; margin: 0 0 12px; }
.fv-doc h2 { font-size: 18px; margin: 24px 0 8px; }
.fv-form { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.fv-form input { font: 18px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; padding: 10px 12px;
                 border: 1px solid var(--fv-line); border-radius: 6px; text-transform: uppercase; width: 100%; }
.fv-btn { font: inherit; font-weight: 600; padding: 10px 14px; border: 0; border-radius: 6px; background: var(--fv-accent);
          color: #fff; cursor: pointer; }
.fv-error { color: var(--fv-err); font-weight: 600; }
.fv-muted { color: var(--fv-muted); font-size: 13px; }
.fv-start { text-align: center; margin-top: 12vh; }
.fv-spinner { width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%; border: 4px solid var(--fv-line);
              border-top-color: var(--fv-accent); animation: fv-spin 1s linear infinite; }
@keyframes fv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fv-spinner { animation: none; } }
.fv-form .fv-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 8px; }
.fv-form .fv-check input { width: auto; margin: 3px 0 0; flex: none; }
.fv-en { margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--fv-line); color: var(--fv-muted); }