body { margin: 0; }
.login-wrap { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 12px; background: #14171c; font-family: system-ui, sans-serif; color: #e6e9ee; }
.login-card { width: 100%; max-width: 360px; background: #1d2128; border: 1px solid #2e343e; border-radius: 8px; padding: 20px; }
.login-card h1 { font-size: 18px; margin: 0 0 12px; }
.login-card label { display: block; font-size: 12px; color: #8b94a3; margin: 10px 0 4px; }
.login-card input { width: 100%; box-sizing: border-box; background: #14171c; color: #e6e9ee; border: 1px solid #2e343e; border-radius: 6px; padding: 10px; font: inherit; }
.login-card button { width: 100%; margin-top: 16px; background: #2f81f7; color: #fff; border: 0; border-radius: 6px; padding: 10px; font: inherit; min-height: 40px; cursor: pointer; }
.login-card .msg { margin-top: 12px; font-size: 13px; padding: 8px; border-radius: 6px; background: #3d2e00; color: #f0c75e; }
.login-card .msg.ok { background: #0f3d1e; color: #56d364; }
.hint { font-size: 12px; color: #8b94a3; margin-top: 8px; }
.code-box { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; padding: 10px; border: 1px dashed #2ea043; border-radius: 6px; user-select: all; }
/* tables: card layout on phones (MudBlazor Breakpoint.Xs handles most; this keeps long codes from overflowing) */
.mud-table-cell { overflow-wrap: anywhere; }