/* Accounts UI (SPEC_V1 item 9): login page (login.html / login.js) and the header user badge (auth.js). Uses style.css variables. */
input[type=password] { background: #0e0f12; border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; }
input[type=password]:focus { outline: none; border-color: var(--accent2); }

/* ---------- login page ---------- */
.loginpage { min-height: 100vh; display: grid; place-items: center; }
.login-wrap { width: 390px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.login-brand { justify-content: center; font-size: 22px; }
.login-brand .mark { width: 28px; height: 28px; font-size: 16px; }
.login-card { padding: 16px 18px 18px; margin: 0; }
.login-tabs { display: flex; width: 100%; margin-bottom: 14px; }
.login-tabs button { flex: 1; padding: 6px 8px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; }
.login-form input { width: 100%; padding: 7px 9px; font-size: 14px; }
.login-form .btn.big { margin-top: 4px; }
.login-form .msg:empty { display: none; }
.login-note { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; line-height: 1.8; }
.login-note a.btn { text-decoration: none; }

/* ---------- header user badge ---------- */
.userbox { position: relative; display: flex; align-items: center; gap: 6px; }
.userbox a.btn { text-decoration: none; color: var(--text); }
.ubtn { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 3px 11px; cursor: pointer; font-size: 12px; }
.ubtn:hover { border-color: #4b4f58; }
.uname { font-weight: 600; }
.uplan { color: var(--accent); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.umenu { position: absolute; right: 0; top: calc(100% + 6px); width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 28px #000a; z-index: 60; }
.umenu .uhead { margin-bottom: 8px; }
.utab { width: 100%; border-collapse: collapse; font-size: 12px; }
.utab th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 0; }
.utab td { padding: 2px 0; }
.utab .n { text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; }
.utab .r { color: var(--muted); font-size: 11px; }
.utab tr.full td { color: var(--err); }
.upw { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.upw input { width: 100%; }

/* ---------- cycle 39: Google sign-in + invite codes (login page) ---------- */
.gbox { display: flex; flex-direction: column; gap: 10px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 6px; padding: 9px 12px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.gbtn:hover { background: #f4f6f9; }
.gbtn.off { opacity: .45; cursor: not-allowed; }
.gsub { line-height: 1.45; }
.invbox summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.invbox[open] summary { margin-bottom: 8px; }
.inv-form { display: flex; gap: 6px; }
.inv-form input { flex: 1; padding: 6px 8px; font-size: 13px; letter-spacing: .5px; }
.login-or { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11.5px; margin: 16px 0 12px; }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.login-note.warn { border-color: var(--warn); color: var(--text); }
.login-foot { text-align: center; }
.login-foot a { color: var(--muted); }

/* cycle 44 TGR: profile part of the user menu (profile.js) */
.uprof:empty { display: none; }
.uprof { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 0; margin: 6px 0; }
.uprow { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
.szopt { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; cursor: pointer; }   /* cycle 75 SZ: "Show sizes as" (sizefmt.js) */
.szopt input { margin: 0; }
#userBox #uSz { margin-left: 6px; }
.upref { flex: 1; min-width: 120px; font-size: 11px; background: var(--bg, #15161a); color: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; }
/* cycle 44 TGR: profile tabs + affiliate table (profile.js) */
.umenu { width: min(460px, 94vw); }
.uptabs { display: flex; gap: 4px; margin-bottom: 6px; }
.uptabs button { background: none; border: 1px solid var(--border); color: inherit; border-radius: 12px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.uptabs button.on { background: var(--border); }
.upaff { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.upaff th, .upaff td { padding: 3px 4px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.upaff .n { text-align: right; white-space: nowrap; }
.upaff th { white-space: nowrap; font-weight: 600; }
.upaff td .small { white-space: nowrap; }
.upsec.upfocus { outline: 1px solid var(--accent, #4fa65b); border-radius: 6px; }
.upsec:empty { display: none; }
.upfoot { margin-top: 8px; text-align: right; font-size: 11px; }
.upfoot a { color: var(--muted, #8a8f99); text-decoration: none; }
.upfoot a:hover { text-decoration: underline; }