.auth-card{max-width:520px;margin:64px auto;padding:40px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.invite-logo{display:flex;justify-content:center;margin-bottom:20px}
.invite-logo-img{height:52px;display:block}
.invite-logo .logo-placeholder{width:60px;height:60px;border-radius:14px;font-size:1.15rem}
.auth-card h1{margin-top:0;font-size:1.4rem;font-weight:600}
.auth-card h2{font-size:1rem;font-weight:600;margin:0 0 4px}
/* Each settings block (Profile / Communication / Appearance / Quiz
   settings / Study Plan's own sections) gets its own clearly bordered
   "row" instead of just stacking with a margin — the visual separation
   the account page was missing entirely before. */
.account-section{padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}
.account-section--first{padding-top:0;margin-top:20px;border-top:0}

.terms-video-list summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.terms-video-list ul{margin:10px 0 0;padding-left:20px;display:grid;gap:4px;font-size:.88rem}
.auth-card form{display:grid;gap:18px;margin-top:24px}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:500;color:var(--ink)}
/* height is explicit (not just padding-driven) so the box is pixel-fixed
   regardless of input[type] — WebKit renders a password field's masked dots
   with slightly different glyph metrics than plain text, so a type=password
   / type=text toggle (see password-toggle.js) could otherwise shift the
   input's own rendered height by a sub-pixel and visibly jump the toggle
   button along with it. */
.auth-card input{height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--surface);color:var(--ink)}
.auth-card input[aria-invalid="true"]{border-color:var(--auth-bad,#7A2E2E)}
.auth-card input[type="color"]{width:52px;height:42px;padding:4px;cursor:pointer;flex-shrink:0}
.auth-card select{height:42px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--surface);color:var(--ink);cursor:pointer}
.auth-card textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--surface);color:var(--ink);resize:vertical}
.auth-card textarea[aria-invalid="true"]{border-color:var(--auth-bad,#7A2E2E)}
/* .auth-card form.account-inline-form beats plain ".auth-card form" on
   specificity (two classes vs one class + element) so this row layout
   actually overrides the default stacked/grid form — label, swatch and
   button all sit on one line instead of each on its own row. */
.auth-card form.account-inline-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.account-inline-form label{flex-shrink:0}
.auth-card .muted{color:var(--muted);font-size:.88rem;line-height:1.6}
.auth-error{background:var(--auth-bad-bg,#FBF2F2);border:1px solid var(--line);color:var(--auth-bad,#7A2E2E);padding:10px 12px;border-radius:8px;font-size:.88rem}
.auth-card .benefits{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:7px;font-size:.88rem;color:var(--ink)}
.auth-card .benefits li{padding-left:26px;position:relative}
.auth-card .benefits li:before{content:"✓";color:var(--auth-good,#3F6B4F);font-weight:700;position:absolute;left:0}
.auth-card .checkbox-row{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;font-size:.86rem}
.auth-card .checkbox-row input{width:auto;margin-top:2px}

/* Injected by password-toggle.js around every input[type=password] site-wide
   — temporary, per product request, so anyone can double-check what they
   typed while the invite/admin flows above are new and unfamiliar. */
.pw-wrap{position:relative;width:100%;height:42px}
.pw-wrap input{width:100%;height:100%;padding-right:40px}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:6px}
.pw-toggle:hover{color:var(--ink);background:var(--bg)}
/* base.css's generic "button:active{transform:scale(.97)}" press-feedback
   rule applies to this button too (it IS a <button>), and `transform` isn't
   additive — its scale(.97) fully REPLACES this button's own
   translateY(-50%) centering transform instead of combining with it, so on
   every press the icon snapped out of vertical-center and back on release.
   Composing both transforms here (and outranking that rule on specificity:
   one class + :active beats a bare element + :active) fixes it. */
.pw-toggle:active{transform:translateY(-50%) scale(.97)}
.pw-toggle svg{width:18px;height:18px}

.field-error{color:var(--auth-bad,#7A2E2E);font-size:.82rem;font-weight:400;animation:field-error-in .25s ease}
@keyframes field-error-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.password-requirements{list-style:none;padding:0;margin:-8px 0 0;display:grid;gap:7px;font-size:.85rem}
.password-requirements li{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:400;transition:color .3s ease}
.password-requirements li.met{color:var(--ink)}
.password-requirements .req-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;background:transparent;transition:background-color .3s ease,border-color .3s ease}
.password-requirements li.met .req-icon{background:var(--auth-good,#3F6B4F);border-color:var(--auth-good,#3F6B4F)}
.password-requirements .req-icon svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.password-requirements li.met .req-icon svg{opacity:1;transform:scale(1)}

:root[data-theme="dark"]{--auth-good:#7FC79A;--auth-bad:#E08585;--auth-bad-bg:#2E1C1C}