/* BRAT front door. Everything shared comes from /_hub/hub.css; this file holds only what this page adds. */
body.locked { background: #0A0A0A; color: #fff; }
.gate { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; }
.gate .w { width: 100%; max-width: 560px; }
.gate .wordmark svg { height: 40px; } .gate .wordmark svg path { fill: #fff; }
.gate h1 { margin: 72px 0 40px; font-size: clamp(40px, 6vw, 56px); letter-spacing: -0.04em; text-transform: uppercase; animation: page-in 480ms var(--ease) both; }
.gate .lead { color: #A6A6A6; margin: -24px 0 40px; max-width: 46ch; }
.gate label { display: block; margin-bottom: 28px; font-size: var(--label); color: #A6A6A6; }
.gate input { display: block; width: 100%; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); border-radius: 0; background: transparent; color: #fff; font-size: var(--body); transition: border-color 220ms var(--ease); }
.gate input:focus { outline: 0; border-color: #fff; }
.gate input.code { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.gate .go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: #fff; color: #0A0A0A; font-size: var(--label); font-weight: 700; transition: scale 220ms var(--ease), opacity 220ms var(--ease); }
.gate .go:active { scale: 0.97; transition-duration: 120ms; } .gate .go:disabled { opacity: .5; }
.gate .err { min-height: 22px; margin: 0 0 16px; font-size: var(--label); font-weight: 700; }
.gate .foot { margin-top: 72px; font-size: var(--label); color: #6A6A6A; }
.gate .key { margin: 0 0 28px; padding: 20px 24px; background: #171717; }
.gate .key .label { color: #A6A6A6; }
.gate .key code { display: block; margin: 8px 0 12px; font-family: var(--text); font-size: var(--body); letter-spacing: 0.08em; overflow-wrap: anywhere; }
.gate .key .quiet { color: #fff; text-decoration-color: rgba(255,255,255,.4); margin-right: 20px; }

.apps { border-top: 1px solid var(--hair); }
.app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr) 44px; gap: 24px; align-items: center; min-height: 112px; border-bottom: 1px solid var(--hair-soft); text-decoration: none; }
.app .t { font-family: var(--display); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; }
.app .w { color: var(--g1); }
.app .at { font-size: var(--label); color: var(--g1); overflow-wrap: anywhere; }
.app .go { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.app .go::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 9h14M10 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 9h14M10 3l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: translate 320ms var(--ease); }
.app:hover .go { background: var(--ink); color: var(--paper); } .app:hover .go::before { translate: 3px 0; }
@media (max-width: 860px) { .app { grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 16px; padding: 20px 0; } .app .t { font-size: 34px; } .app .w, .app .at { grid-column: 1; } .app .go { grid-column: 2; grid-row: 1 / span 3; } }
.menu-wrap { position: relative; }
.burger { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
.burger::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 5h14M2 9h14M2 13h14'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 5h14M2 9h14M2 13h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.burger[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.menu { position: absolute; right: 0; top: 58px; z-index: 30; width: 280px; padding: 8px; background: var(--paper); border: 1px solid var(--ink); animation: open-in 320ms var(--ease) both; }
.menu .me { margin: 0 0 8px; padding: 10px 12px 14px; border-bottom: 1px solid var(--hair-soft); font-size: var(--label); color: var(--g1); overflow-wrap: anywhere; }
.menu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; font-size: var(--label); font-weight: 700; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.menu button:hover { background: var(--ink); color: var(--paper); }
.pw { max-width: 760px; }