@font-face { font-family: "Outfit"; src: url("/shared/fonts/Outfit-Variable.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
:root { color-scheme: light; --ink:#102a2a; --muted:#607574; --paper:#edf5f2; --surface:#fff; --line:#d9e7e2; --teal:#087a70; --teal-dark:#075e57; --red:#b23e32; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin:0; background:radial-gradient(circle at 20% 0%,#d7eee8 0,transparent 34%),var(--paper); color:var(--ink); font-family:"Outfit",system-ui,sans-serif; }
button, a { font:inherit; }
button:focus-visible, a:focus-visible { outline:3px solid rgba(8,122,112,.25); outline-offset:3px; }
.auth-shell { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:28px; }
.auth-card,.admin-card { width:min(100%,520px); padding:40px; border:1px solid rgba(255,255,255,.8); border-radius:28px; background:rgba(255,255,255,.94); box-shadow:0 30px 80px rgba(19,61,56,.14); }
.admin-card { width:min(100%,1000px); }
.auth-brand { display:flex; align-items:center; gap:13px; margin-bottom:38px; }
.auth-brand>span { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--teal-dark); font-weight:800; box-shadow:0 8px 20px rgba(7,94,87,.22); }
.auth-brand div { display:flex; flex-direction:column; line-height:1.05; }
.auth-brand strong { letter-spacing:.13em; font-size:20px; }
.auth-brand small { margin-top:5px; color:var(--muted); }
.auth-eyebrow { margin:0 0 10px; color:var(--teal); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(34px,6vw,48px); line-height:1.04; letter-spacing:-.04em; }
.auth-card>p:not(.auth-eyebrow):not(.auth-status) { margin:20px 0; color:var(--muted); font-size:17px; line-height:1.6; }
.google-button { min-height:44px; margin:30px 0 6px; display:flex; justify-content:center; }
.auth-status { min-height:22px; margin:14px 0 0; color:var(--muted); text-align:center; }
.auth-status.is-error { color:var(--red); }
.privacy-note { margin-top:30px; padding:16px; display:grid; gap:5px; border-radius:16px; background:#f1f7f5; color:var(--muted); font-size:14px; line-height:1.45; }
.privacy-note strong { color:var(--ink); }
.pending-mark { width:70px; height:70px; margin:28px auto; display:grid; place-items:center; border-radius:50%; background:#fff3d8; font-size:30px; }
.auth-actions,.admin-header__actions,.user-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.auth-actions { justify-content:center; }
.primary-button,.row-button,.filter-button,.text-button { border:0; cursor:pointer; }
.primary-button,.row-button { padding:11px 18px; border-radius:999px; color:#fff; background:var(--teal-dark); font-weight:700; }
.text-button { padding:10px; color:var(--teal-dark); background:transparent; font-weight:700; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.admin-header .auth-brand { margin:0; }
.admin-header a { color:var(--teal-dark); font-weight:700; text-decoration:none; }
.admin-intro { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; padding:34px 0 26px; }
.admin-intro p:last-child { max-width:610px; margin:14px 0 0; color:var(--muted); line-height:1.5; }
.admin-email { padding:8px 12px; border-radius:999px; background:#edf5f2; color:var(--teal-dark); font-size:13px; }
.admin-filters { display:flex; gap:8px; margin-bottom:22px; }
.filter-button { padding:9px 14px; border-radius:999px; color:var(--muted); background:#edf3f1; font-weight:700; }
.filter-button.is-active { color:#fff; background:var(--teal-dark); }
.users-list { display:grid; gap:10px; }
.user-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:18px; padding:17px 18px; border:1px solid var(--line); border-radius:18px; }
.user-row>div:first-child { min-width:0; display:grid; gap:3px; }
.user-row span,.user-row small { color:var(--muted); overflow-wrap:anywhere; }
.status-badge { padding:7px 10px; border-radius:999px; font-size:12px; font-weight:800; }
.status-pending { color:#8b5700!important; background:#fff3d8; }.status-approved { color:#17613e!important; background:#e8f5ed; }.status-revoked { color:#922f28!important; background:#fce9e6; }
.row-button { padding:8px 13px; font-size:13px; }.row-button.is-danger { color:var(--red); background:#fce9e6; }.row-button:disabled { opacity:.55; cursor:wait; }
@media(max-width:720px){.auth-shell{padding:14px}.auth-card,.admin-card{padding:26px;border-radius:22px}.admin-header,.admin-intro{align-items:flex-start;flex-direction:column}.user-row{grid-template-columns:1fr}.user-actions{justify-content:flex-start}.auth-brand{margin-bottom:28px}}