:root { --primary: #0d4c8b; --ink: #142236; --line: #dbe3ec; --bg: #f4f7fa; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
.vbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.vbar__name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar__btn { flex: 0 0 auto; display: inline-block; padding: 8px 14px; border-radius: 8px; font-size: .85rem; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: #fff; cursor: pointer; }
.vbar__btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.vbar__btn:hover { filter: brightness(1.06); }
.vframe { flex: 1 1 auto; width: 100%; border: 0; }
.verr { margin: auto; max-width: 480px; padding: 32px 20px; text-align: center; }
.verr h1 { font-size: 1.15rem; }
.verr a { color: var(--primary); }
@media (max-width: 560px) { .vbar__btn span { display: none; } }