* { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #1a1a2e; --bg-raised: #16213e; --bg-input: #222; --border: #2a2a45; --text: #ccc; --text-dim: #777; --text-bright: #fff; --accent: #007BFF; --accent-hover: #0069d9; --danger: #ff6b6b; --success: #28a745; --row-hover: #222a40; --row-selected: #1e3a5f; --row-height: 30px; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; user-select: none; font-size: 14px; } /* === LOGIN === */ #loginOverlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); background-image: radial-gradient(ellipse at top, var(--bg-raised) 0%, var(--bg) 70%); z-index: 1000; } #loginBox { width: 340px; padding: 36px; background: var(--bg-input); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; } #loginLogo { width: 48px; margin-bottom: 10px; } #loginBox h1 { color: var(--text-bright); font-size: 20px; margin-bottom: 20px; font-weight: 600; } #loginForm { width: 100%; display: flex; flex-direction: column; gap: 8px; } #loginForm input { padding: 10px 12px; border: 1px solid #444; border-radius: 7px; background: #2a2a2a; color: var(--text-bright); font-size: 13px; outline: none; } #loginForm input:focus { border-color: var(--accent); } #loginForm input::placeholder { color: var(--text-dim); } #loginForm .pwField { position: relative; display: flex; } #loginForm .pwField > input { flex: 1; padding-right: 38px; } #loginForm .pwToggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; background: transparent; border: none; color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; font-weight: normal; } #loginForm .pwToggle:hover { color: var(--text-bright); background: rgba(255,255,255,0.06); } #loginForm .pwToggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } #loginForm button { padding: 10px; border: none; border-radius: 7px; background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; } #loginForm button:hover { background: var(--accent-hover); } /* Hide the login overlay before paint when we already have a session cookie — avoids the brief login-form flicker on returning visits. The class is set by an inline