.box-access {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 24px 18px;
    border: 0;
    overflow: auto;
    touch-action: pan-x pan-y;
    background: #f4f6fb;
    color: #172844;
    color-scheme: light;
    font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.box-access[open] { display: grid; place-items: center; }
.box-access [hidden] { display: none; }
.box-access-content { width: min(100%, 360px); min-width: 0; text-align: center; }
.box-access-brand {
    display: inline-flex;
    align-items: flex-end;
    vertical-align: middle;
    gap: 6px;
    color: #172844;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 1.3px;
    line-height: 1;
}
.box-access-logo { display: grid; place-items: center; width: 42px; height: 26px; }
.box-access-logo img { display: block; width: 42px; height: 21px; object-fit: contain; }
.box-access-brand-label { margin-bottom: 4px; }
.box-access h1 { margin: 9px 0 16px; font-size: clamp(22px, 6vw, 25px); line-height: 1.2; letter-spacing: -.4px; }
.box-access-code {
    display: block;
    margin: 0 auto 12px;
    padding: 9px 12px;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    background: #fff;
    color: #172844;
    font: 600 13px/1.6 ui-monospace, Consolas, monospace;
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text;
}
.box-access-actions { display: flex; justify-content: center; gap: 8px; }
.box-access button {
    box-sizing: border-box;
    min-width: 100px;
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    font: 750 13px/1.2 system-ui, sans-serif;
}
.box-access button:focus-visible { outline: 2px solid #90b6ff; outline-offset: 2px; }
.box-access button:disabled { opacity: .55; cursor: wait; }
.box-access-copy { background: #edf3ff; border-color: #d5e2ff !important; color: #1746a2; }
.box-access-copy:hover:not(:disabled) { background: #e0ebff; }
.box-access-next { background: #2563eb; color: #fff; }
.box-access-next:hover:not(:disabled) { background: #1e55cc; }
.box-access-message { min-height: 2.8em; margin: 10px 0 0; color: #536780; font-size: 12px; }
.box-access-message.is-error { color: #b4233c; }
.box-access-toast {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #22c55e;
    color: #0d321a;
    box-shadow: 0 4px 12px #0003;
    font-weight: 750;
    white-space: nowrap;
    pointer-events: none;
}