@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url(manrope.woff2) format("woff2"); }
:root { --ink: #15202d; --ink-2: #1e293b; --line: #28364a; --brand: #d60a2e; --muted: #94a3b8; --on: #e2e8f0; --ok: #0a7a33; --ok-text: #34d399; --red-text: #ff7186; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ink); color: #fff; font-family: Manrope, "Segoe UI", sans-serif; }

.topbar { display: flex; align-items: center; gap: 20px; padding: 14px 40px; flex-wrap: wrap; background: var(--ink-2); border-bottom: 1px solid var(--line); }
.topbar img { width: 40px; height: 40px; display: block; }
.topbar-title { font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -.01em; }
.topbar-tools { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.page { width: 1100px; max-width: calc(100% - 48px); margin: 0 auto; padding: 40px 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.panel-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.panel { border: 1px solid var(--line); border-radius: 10px; background: #1a2634; overflow: hidden; }
.panel + .panel-head { margin-top: 40px; }
.button { padding: 9px 16px; border: 0; border-radius: 7px; background: var(--brand); color: #fff; font: 800 15px Manrope, "Segoe UI", sans-serif; cursor: pointer; }
.topbar-account { display: flex; align-items: center; gap: 14px; padding-left: 20px; border-left: 1px solid var(--line); }
.topbar-who { font-size: 15px; font-weight: 800; }
.topbar-who:empty { display: none; }
.topbar-who.desk { min-width: 40px; font-size: clamp(20px, 2vw, 28px); text-align: right; }
.tabs { display: flex; gap: 4px; }
.tabs a { padding: 6px 12px; border-radius: 6px; color: var(--muted); font-size: 15px; font-weight: 800; text-decoration: none; }
.tabs a:hover { color: #fff; }
.tabs a.on { background: var(--ink); color: #fff; }

.topbar .topbar-out { display: block; margin: 0; padding: 0; border: 0; }
.topbar-out button { padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); font: 700 13px Manrope, "Segoe UI", sans-serif; cursor: pointer; }
.topbar-out button:hover, .topbar-out button:focus-visible { border-color: var(--muted); color: #fff; }
.door { width: 380px; max-width: calc(100% - 48px); margin: 12vh auto 0; }
.door img { width: 56px; height: 56px; display: block; margin-bottom: 20px; }
.door h1 { margin: 0 0 20px; font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.door label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 15px; font-weight: 500; }
.door input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--ink-2); color: #fff; font: 500 17px Manrope, "Segoe UI", sans-serif; }
.door .button { width: 100%; margin-top: 22px; padding: 12px 16px; font-size: 16px; }
.door .err { margin: 16px 0 0; color: var(--red-text); font-weight: 800; }
.door .lead { margin: 0 0 6px; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.45; }
.door .qr { margin: 14px 0 6px; padding: 0; line-height: 0; }
.door .qr svg { border-radius: 8px; }
.door code { color: #fff; font-size: 14px; word-break: break-all; }