/* Upgrade 3: admin card "Users and invites" (#admin3Root). Prefix .adm3- (shares .acc- pieces from account.css) */
/* first card on #admin (then the news card, then the shops editor): the gap goes below it */
#admin3Root:not(:empty) { margin: 0 0 18px; }
.adm3 { display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.adm3-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.adm3-title { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.adm3-title h2 { margin: 1px 0 4px; font-size: 18px; font-weight: 500; color: var(--ink); }
.adm3-title p { margin: 0; font-size: 13px; color: var(--ink-3); }
.adm3-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm3-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .025); white-space: nowrap; }
.adm3-chip.gold { color: #F8DDA4; border-color: rgba(242, 196, 109, .4); background: rgba(242, 196, 109, .07); }
.adm3-chip.mint { color: var(--mint); border-color: rgba(16, 188, 131, .4); background: rgba(16, 188, 131, .07); }
.adm3-chip.warn { color: #F6CF8C; border-color: rgba(240, 182, 90, .45); background: rgba(240, 182, 90, .08); }
.adm3-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* tabs */
.adm3-tabs { width: 100%; }
.adm3-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; font-size: 13.5px; }
.adm3-tabs .acc-svg { width: 16px; height: 16px; }
.adm3-n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; line-height: 20px; text-align: center !important; background: rgba(255, 255, 255, .08); color: var(--ink-2); }
.adm3-tabs button[aria-selected="true"] .adm3-n { background: var(--accent); color: #04120C; }
.adm3-panel { min-width: 0; }
.adm3-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 4px; color: var(--ink-3); font-size: 13.5px; }
.adm3-dim { color: var(--ink-3); }

/* users table (cards on phones) */
.adm3-tablewrap { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.adm3-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm3-table th { text-align: start; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 11px 14px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm3-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
.adm3-table tbody tr:last-child td { border-bottom: 0; }
.adm3-table tbody tr { transition: background .15s; }
.adm3-table tbody tr:hover td { background: rgba(255, 255, 255, .02); }
.adm3-table tr.off td:not(.adm3-act) { opacity: .62; }
.adm3-table .adm3-c { text-align: center; }
.adm3-ucell { min-width: 220px; }
.adm3-u, .adm3-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.adm3-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--line-2); }
.adm3-av.admin { color: #1A1204; background: linear-gradient(135deg, #FFF3D6, #E3C07E 55%, #B8893B); box-shadow: 0 0 14px -3px rgba(242, 196, 109, .6); }
.adm3-av.big { width: 52px; height: 52px; font-size: 20px; }
.adm3-u-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.adm3-u-txt b { font-weight: 500; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.adm3-mail { font-size: 12.5px; color: var(--ink-3); font-family: "Schibsted Grotesk", system-ui, sans-serif; overflow-wrap: anywhere; }
.adm3-you { vertical-align: 1px; margin-inline-start: 4px; height: 20px; }
.adm3-role { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.adm3-role.admin { color: #F8DDA4; }
.adm3-role .acc-svg { width: 14px; height: 14px; }
.adm3-st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; border: 1px solid; }
.adm3-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.adm3-st[data-s="on"] { color: var(--mint); border-color: rgba(16, 188, 131, .35); background: rgba(16, 188, 131, .07); }
.adm3-st[data-s="off"] { color: #F7A3A6; border-color: rgba(242, 103, 107, .4); background: rgba(242, 103, 107, .07); }
.adm3-act { text-align: end; white-space: nowrap; }

/* manage dialog */
.adm3-dlg .adm3-who { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); }
.adm3-who.small { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); }
.adm3-who-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; }
.adm3-self { margin: 0; font-size: 12.5px; color: #F6CF8C; line-height: 1.6; }
.adm3-opts { display: flex; flex-direction: column; gap: 8px; }
.adm3-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); color: var(--ink); cursor: pointer; text-align: start; font: inherit; transition: border-color .2s, background .2s, transform .15s; }
.adm3-opt:hover:not(:disabled) { border-color: rgba(207, 242, 230, .35); background: rgba(255, 255, 255, .05); }
.adm3-opt:active:not(:disabled) { transform: scale(.99); }
.adm3-opt:disabled { opacity: .4; cursor: not-allowed; }
.adm3-opt-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--mint); background: rgba(16, 188, 131, .1); box-shadow: inset 0 0 0 1px rgba(16, 188, 131, .3); }
.adm3-opt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm3-opt-t b { font-weight: 500; font-size: 14px; }
.adm3-opt-t small { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.adm3-opt.danger .adm3-opt-ic { color: #F7A3A6; background: rgba(242, 103, 107, .1); box-shadow: inset 0 0 0 1px rgba(242, 103, 107, .35); }
.adm3-opt.danger b { color: #F7A3A6; }
.adm3-opt.danger:hover:not(:disabled) { border-color: rgba(242, 103, 107, .5); background: rgba(242, 103, 107, .06); }
.adm3-opt[aria-busy="true"] { opacity: .6; cursor: progress; }

/* invites */
.adm3-inv { display: flex; flex-direction: column; gap: 16px; }
.adm3-newinv { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); }
.adm3-inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; }
.adm3-inv-grid .field input { width: 100%; font-family: inherit; }
.adm3-days { align-self: flex-start; }
.adm3-days button { height: 38px; }
.adm3-newinv .errors:empty { display: none; }
.adm3-newinv .errors { margin: 0; }
.adm3-made { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(16, 188, 131, .45); background: radial-gradient(120% 100% at 100% 0%, rgba(16, 188, 131, .16), transparent 55%), rgba(4, 18, 13, .6);
  box-shadow: inset 0 1px 0 rgba(207, 242, 230, .15), 0 22px 60px -26px rgba(16, 188, 131, .6); animation: accVaultIn .4s cubic-bezier(.2, .8, .2, 1) both; }
.adm3-made-top { display: flex; align-items: center; gap: 10px; color: var(--mint); font-size: 15px; }
.adm3-made-top b { flex: 1; font-weight: 500; }
.adm3-made-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #04120C; background: linear-gradient(180deg, #F4FFFA, #9BE9CC); box-shadow: 0 0 18px rgba(16, 188, 131, .5); }
.adm3-made-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
.adm3-made-grid .field input { width: 100%; font-size: 13.5px; }
.adm3-code { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px dashed rgba(16, 188, 131, .55); background: rgba(0, 0, 0, .35);
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 19px; letter-spacing: .1em; color: var(--mint); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; text-align: center; }
.adm3-code.sm { font-size: 16px; min-height: 40px; }
.adm3-made-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.adm3-made-acts .btn { flex: 1 1 140px; }
.adm3-reset { border-color: rgba(242, 196, 109, .5); background: radial-gradient(120% 100% at 100% 0%, rgba(242, 196, 109, .16), transparent 55%), rgba(18, 13, 4, .6); box-shadow: inset 0 1px 0 rgba(255, 236, 190, .15); }
.adm3-reset .adm3-code { color: #FFE7B3; border-color: rgba(242, 196, 109, .55); }
.adm3-reset .acc-note { margin: -4px 0 0; text-align: center; }
.adm3-msg { width: 100%; min-height: 130px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); color: var(--ink); padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.7; resize: vertical; }
.adm3-invhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.adm3-invlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.adm3-ii { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); min-width: 0; }
.adm3-ii[data-s="open"] { border-color: rgba(16, 188, 131, .32); }
.adm3-ii[data-s="expired"], .adm3-ii[data-s="revoked"] { opacity: .65; }
.adm3-ii-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.adm3-ii-code { font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 15px; letter-spacing: .06em; color: var(--ink); }
.adm3-ist { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm3-ist i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.adm3-ist[data-s="open"] { color: var(--mint); border-color: rgba(16, 188, 131, .4); background: rgba(16, 188, 131, .07); }
.adm3-ist[data-s="used"] { color: #F8DDA4; border-color: rgba(242, 196, 109, .4); background: rgba(242, 196, 109, .06); }
.adm3-ist[data-s="expired"], .adm3-ist[data-s="revoked"] { color: var(--ink-3); }
.adm3-ii-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-3); }
.adm3-ii-note { color: var(--ink-2); }
.adm3-ii-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.btn.adm3-revoke:hover { border-color: rgba(242, 103, 107, .6); color: #F7A3A6; }

/* sign-up mode */
.adm3-su { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.adm3-su legend { padding: 0; margin-bottom: 14px; }
.adm3-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm3-mode { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.adm3-mode:hover { border-color: rgba(207, 242, 230, .3); }
.adm3-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.adm3-mode:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 2px; }
.adm3-mode.on[data-m="invite"] { border-color: rgba(16, 188, 131, .55); background: linear-gradient(rgba(16, 188, 131, .12), rgba(16, 188, 131, .02)); box-shadow: 0 0 0 1px rgba(16, 188, 131, .2), 0 18px 40px -24px rgba(16, 188, 131, .7); }
.adm3-mode.on[data-m="open"] { border-color: rgba(242, 196, 109, .55); background: linear-gradient(rgba(242, 196, 109, .12), rgba(242, 196, 109, .02)); box-shadow: 0 0 0 1px rgba(242, 196, 109, .2), 0 18px 40px -24px rgba(242, 196, 109, .7); }
.adm3-mode-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); }
.adm3-mode.on[data-m="invite"] .adm3-mode-ic { color: var(--mint); background: rgba(16, 188, 131, .12); box-shadow: inset 0 0 0 1px rgba(16, 188, 131, .4); }
.adm3-mode.on[data-m="open"] .adm3-mode-ic { color: #F8DDA4; background: rgba(242, 196, 109, .12); box-shadow: inset 0 0 0 1px rgba(242, 196, 109, .4); }
.adm3-mode-ic .acc-svg { width: 22px; height: 22px; }
.adm3-mode-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.adm3-mode-t b { font-weight: 500; font-size: 15px; color: var(--ink); }
.adm3-mode-t small { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.adm3-now { position: absolute; top: 12px; inset-inline-end: 12px; }
.adm3-mode.on .adm3-mode-t { padding-inline-end: 90px; }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .adm3 { padding: 18px 14px; }
  .adm3-tabs button { font-size: 12.5px; padding: 0 8px; gap: 5px; }
  .adm3-tabs .acc-svg { display: none; }
  .adm3-tablewrap { border: 0; border-radius: 0; overflow: visible; }
  .adm3-table, .adm3-table tbody { display: block; }
  .adm3-table thead { display: none; }
  .adm3-table tbody { display: flex; flex-direction: column; gap: 10px; }
  .adm3-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .025); }
  .adm3-table tr.self { border-color: rgba(242, 196, 109, .35); }
  .adm3-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .adm3-table tbody tr:hover td { background: none; }
  .adm3-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11px; color: var(--ink-3); }
  .adm3-table td.adm3-ucell { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid var(--line); min-width: 0; }
  .adm3-table .adm3-c { text-align: start; }
  .adm3-table td.adm3-act { grid-column: 1 / -1; text-align: start; }
  .adm3-table td.adm3-act .btn { width: 100%; height: 38px; }
  .adm3-inv-grid, .adm3-made-grid, .adm3-modes { grid-template-columns: minmax(0, 1fr); }
  .adm3-days { width: 100%; }
  .adm3-days button { flex: 1; padding: 0 8px; }
  .adm3-invlist { grid-template-columns: minmax(0, 1fr); }
}
/* phones and touch screens: every control is a 40 px target, as on the other upgrade-3 screens
   (#admin3Root .btn.sm also beats the 38 px "Manage" button of the phone table above) */
@media (max-width: 600px), (pointer: coarse) {
  .adm3-tabs button, .adm3-days button, #admin3Root .btn.sm { height: 40px; }
  .adm3-made-x { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .adm3-n { display: none; }
  .adm3-mode.on .adm3-mode-t { padding-inline-end: 0; padding-top: 26px; }
}

/* ---------- light theme ---------- */
html[data-theme="light"] .adm3-chip { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .adm3-chip.gold, html[data-theme="light"] .adm3-role.admin, html[data-theme="light"] .adm3-ist[data-s="used"] { color: #7A5310; border-color: rgba(169, 119, 31, .4); }
html[data-theme="light"] .adm3-role.admin { border: 0; }
html[data-theme="light"] .adm3-chip.gold, html[data-theme="light"] .adm3-ist[data-s="used"] { background: rgba(240, 190, 100, .14); }
html[data-theme="light"] .adm3-chip.mint, html[data-theme="light"] .adm3-st[data-s="on"], html[data-theme="light"] .adm3-ist[data-s="open"] { color: #0B7552; background: rgba(16, 188, 131, .1); }
html[data-theme="light"] .adm3-chip.warn { color: #8A5A12; background: rgba(240, 182, 90, .14); }
html[data-theme="light"] .adm3-st[data-s="off"] { color: #B23338; background: rgba(210, 70, 75, .08); }
html[data-theme="light"] .adm3-n { background: rgba(16, 48, 36, .08); }
html[data-theme="light"] .adm3-tabs button[aria-selected="true"] .adm3-n { color: #fff; }
html[data-theme="light"] .adm3-table th { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .adm3-tablewrap { background: rgba(255, 255, 255, .4); }
html[data-theme="light"] .adm3-table tbody tr:hover td { background: rgba(16, 168, 117, .04); }
html[data-theme="light"] .adm3-av { background: linear-gradient(135deg, #fff, #E6EDE8); }
html[data-theme="light"] .adm3-av.admin { background: linear-gradient(135deg, #FFF3D6, #E2AE4B); color: #2A1B04; }
html[data-theme="light"] .adm3-dlg .adm3-who, html[data-theme="light"] .adm3-opt, html[data-theme="light"] .adm3-ii, html[data-theme="light"] .adm3-mode { background: rgba(255, 255, 255, .65); }
html[data-theme="light"] .adm3-opt:hover:not(:disabled) { background: #fff; border-color: rgba(16, 168, 117, .4); }
html[data-theme="light"] .adm3-opt-ic { color: #0B7552; }
html[data-theme="light"] .adm3-opt.danger .adm3-opt-ic, html[data-theme="light"] .adm3-opt.danger b { color: #B23338; }
html[data-theme="light"] .adm3-self { color: #8A5A12; }
html[data-theme="light"] .adm3-newinv { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .adm3-made { background: radial-gradient(120% 100% at 100% 0%, rgba(16, 188, 131, .14), transparent 55%), #F4FCF8; border-color: rgba(16, 168, 117, .4); box-shadow: inset 0 1px 0 #fff, 0 18px 40px -24px rgba(16, 168, 117, .5); }
html[data-theme="light"] .adm3-made-top { color: #0B7552; }
html[data-theme="light"] .adm3-code { background: rgba(255, 255, 255, .9); color: #0B7552; }
html[data-theme="light"] .adm3-reset { background: radial-gradient(120% 100% at 100% 0%, rgba(242, 196, 109, .22), transparent 55%), #FFF9EC; border-color: rgba(169, 119, 31, .45); }
html[data-theme="light"] .adm3-reset .adm3-code { color: #6B4710; border-color: rgba(169, 119, 31, .5); }
html[data-theme="light"] .adm3-msg { background: rgba(255, 255, 255, .85); }
html[data-theme="light"] .adm3-mode.on[data-m="invite"] { background: linear-gradient(rgba(16, 188, 131, .12), rgba(255, 255, 255, .7)); }
html[data-theme="light"] .adm3-mode.on[data-m="open"] { background: linear-gradient(rgba(242, 196, 109, .2), rgba(255, 255, 255, .7)); border-color: rgba(169, 119, 31, .5); }
html[data-theme="light"] .adm3-mode.on[data-m="invite"] .adm3-mode-ic { color: #0B7552; }
html[data-theme="light"] .adm3-mode.on[data-m="open"] .adm3-mode-ic { color: #7A5310; }
html[data-theme="light"] .btn.adm3-revoke:hover { color: #B23338; border-color: rgba(210, 70, 75, .5); }
@media (max-width: 860px) {
  html[data-theme="light"] .adm3-table tr { background: rgba(255, 255, 255, .65); }
}
@media (prefers-reduced-motion: reduce) { .adm3-made { animation: none !important; } .adm3-opt { transition: none; } }