/* ============================================================================
   37-admin-users.css — the admin USERS ROSTER (/admin/users).

   A row-card directory rather than a table: every person shows a live
   online/offline dot, the device they came in on, their access tier, and a
   one-click premium control. Markup comes from renderUsersList() in
   js/modules/admin/04f-admin-analytics.js.

   Loaded LAST of all stylesheets so it outranks 29-admin-analytics.css (which
   still styles the old .adm-users-table used nowhere else) and so no later
   media query can outrank the breakpoints at the bottom of this file.

   Theme-aware through the shared --adm-* tokens; the light theme needs real
   overrides because the amber/coral accents are tuned for the dark panel.
   ============================================================================ */

.adm-ur{ --ur-gap:14px; }

/* ---------------------------------------------------------------- stat strip */
.adm-ur-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px;
}
.adm-ur-stat{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 16px; border-radius:15px;
  background:var(--adm-card); border:1px solid var(--adm-border);
  animation:admUrIn .42s cubic-bezier(.22,1,.36,1) both;
}
.adm-ur-stat:nth-child(2){ animation-delay:.05s; }
.adm-ur-stat:nth-child(3){ animation-delay:.1s; }
.adm-ur-stat:nth-child(4){ animation-delay:.15s; }
/* Tinted wash + top hairline, one hue per pill. */
.adm-ur-stat::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; opacity:.9;
  background:linear-gradient(90deg, var(--ur-hue), transparent 85%);
}
.adm-ur-stat::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, var(--ur-wash), transparent 60%);
}
.adm-ur-stat.live { --ur-hue:var(--adm-success); --ur-wash:rgba(52,211,153,.10); }
.adm-ur-stat.total{ --ur-hue:var(--adm-accent);  --ur-wash:rgba(255,138,91,.10); }
.adm-ur-stat.prem { --ur-hue:var(--adm-accent-2);--ur-wash:rgba(251,191,36,.10); }
.adm-ur-stat.dev  { --ur-hue:#8b8cf7;            --ur-wash:rgba(139,140,247,.12); }

.adm-ur-stat-ico{ font-size:19px; line-height:1; display:flex; align-items:center; }
.adm-ur-stat-num{
  font-size:28px; font-weight:800; line-height:1; color:var(--adm-text);
  font-variant-numeric:tabular-nums; letter-spacing:-.6px;
}
.adm-ur-stat-lbl{
  font-size:13.5px; font-weight:700; color:var(--adm-muted);
  text-transform:uppercase; letter-spacing:.5px;
}
.adm-ur-stat.live .adm-ur-stat-num{ color:var(--adm-success); }

/* the pulsing "someone is here" dot, reused in the Online filter chip */
.adm-ur-livedot{
  width:8px; height:8px; border-radius:50%; background:var(--adm-success);
  display:inline-block; flex:0 0 auto;
  animation:admUrPulse 2.2s ease-out infinite;
}

/* ------------------------------------------------------------------ toolbar */
.adm-ur-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.adm-ur-search{
  flex:1 1 260px; min-width:0;
  display:flex; align-items:center; gap:9px;
  padding:0 14px; height:46px; border-radius:12px;
  background:var(--adm-card); border:1px solid var(--adm-border);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.adm-ur-search:focus-within{
  border-color:var(--adm-border-hi);
  box-shadow:0 0 0 3px rgba(255,138,91,.12);
}
.adm-ur-search-ico{ font-size:15px; opacity:.55; flex:0 0 auto; }
.adm-ur .adm-ur-search input{
  flex:1; min-width:0; height:100%;
  background:transparent; border:0; outline:none; padding:0;
  color:var(--adm-text); font-size:15.5px; font-weight:600; font-family:inherit;
}
.adm-ur .adm-ur-search input::placeholder{ color:var(--adm-muted); font-weight:500; }

/* sort picker sits beside the search box */
.adm-ur-sort{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:0 12px 0 14px; height:46px; border-radius:12px;
  background:var(--adm-card); border:1px solid var(--adm-border);
  transition:border-color .16s ease;
}
.adm-ur-sort:focus-within{ border-color:var(--adm-border-hi); }
.adm-ur-sort > span{
  font-size:12.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--adm-muted);
}
.adm-ur .adm-ur-sort select{
  background:transparent; border:0; outline:none; padding:0 2px; height:100%;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--adm-text);
  cursor:pointer;
}

/* clear (✕) — only shown once something is typed (label gets .has-q) */
.adm-ur-clear{
  flex:0 0 auto; display:none; align-items:center; justify-content:center;
  width:22px; height:22px; margin-right:-4px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.07); color:var(--adm-muted); cursor:pointer;
  font-size:12.5px; line-height:1; font-family:inherit;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.adm-ur-search.has-q .adm-ur-clear{ display:inline-flex; }
.adm-ur-clear:hover{ background:rgba(255,255,255,.14); color:var(--adm-text); transform:scale(1.08); }

/* hard reload of the authoritative list — the answer to a just-registered user */
.adm-ur-refresh{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; color:var(--adm-muted); font-family:inherit;
  background:var(--adm-card); border:1px solid var(--adm-border);
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.adm-ur-refresh:hover{ color:var(--adm-text); border-color:var(--adm-border-hi); transform:translateY(-1px); }
.adm-ur-refresh:active{ transform:translateY(0); }
.adm-ur-refresh:disabled{ cursor:default; opacity:.65; }
.adm-ur-refresh.spin{ animation:admUrSpin .7s linear infinite; }
@keyframes admUrSpin{ to{ transform:rotate(360deg); } }
:root[data-theme="light"] .adm-ur-clear{ background:rgba(15,23,42,.05); }
:root[data-theme="light"] .adm-ur-clear:hover{ background:rgba(15,23,42,.1); }

.adm-ur-segs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.adm-ur-seg{
  display:inline-flex; align-items:center; gap:6px;
  padding:0 12px; height:38px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700; letter-spacing:.1px;
  color:var(--adm-muted); background:transparent;
  border:1px solid var(--adm-border);
  transition:color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.adm-ur-seg:hover{ color:var(--adm-text); border-color:var(--adm-border-hi); transform:translateY(-1px); }
.adm-ur-seg span{
  font-size:13px; font-weight:800; padding:1px 6px; border-radius:999px;
  background:rgba(255,255,255,.07); color:inherit; font-variant-numeric:tabular-nums;
}
.adm-ur-seg.active{
  color:#fff; border-color:transparent;
  background:linear-gradient(100deg, var(--adm-accent), var(--adm-accent-2));
  box-shadow:0 6px 18px -10px rgba(255,138,91,.9);
}
.adm-ur-seg.active span{ background:rgba(0,0,0,.2); color:#fff; }
.adm-ur-seg.is-live.active{
  background:linear-gradient(100deg, #34d399, #10b981);
  box-shadow:0 6px 18px -10px rgba(52,211,153,.9);
}

/* ------------------------------------------------------- rows: shared grid */
.adm-ur-head,
.adm-ur-row{
  display:grid;
  grid-template-columns:52px minmax(150px,1.5fr) minmax(136px,1fr) minmax(128px,1fr) 126px 168px;
  align-items:center; gap:var(--ur-gap);
}
.adm-ur-head{
  padding:0 16px 8px; margin-bottom:2px;
}
.adm-ur-head span{
  font-size:12.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:var(--adm-muted); opacity:.75;
}
.adm-ur-head-live{ text-align:right; font-variant-numeric:tabular-nums; }
.adm-ur-list{ display:flex; flex-direction:column; gap:8px; }

/* first-paint placeholders (the roster mounts before /api/users answers) */
.adm-ur-skel{
  height:62px; border-radius:14px;
  border:1px solid var(--adm-border); background:var(--adm-card);
  position:relative; overflow:hidden;
}
.adm-ur-skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
  transform:translateX(-100%);
  animation:admUrShimmer 1.25s ease-in-out infinite;
}
.adm-ur-skel:nth-child(n+4){ opacity:.55; }

/* window widener — the roster only puts USERS_PAGE rows in the DOM at a time */
.adm-ur-more{
  width:100%; margin-top:10px; height:46px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:750;
  display:flex; align-items:center; justify-content:center; gap:9px;
  color:var(--adm-text); border-radius:13px;
  background:var(--adm-card); border:1px dashed var(--adm-border);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.adm-ur-more:hover{
  border-color:var(--adm-border-hi); background:var(--adm-card-hi); transform:translateY(-1px);
}
.adm-ur-more span{
  font-size:13px; font-weight:700; color:var(--adm-muted);
  padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.05);
}

.adm-ur-row{
  position:relative; overflow:hidden;
  padding:11px 16px; border-radius:14px; cursor:pointer;
  background:var(--adm-card); border:1px solid var(--adm-border);
  animation:admUrIn .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i, 0) * 26ms);
  transition:transform .18s cubic-bezier(.22,1,.36,1), border-color .18s ease,
             background .18s ease, box-shadow .18s ease;
}
/* accent rail — grows on hover, and stays lit while the person is online */
.adm-ur-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--adm-accent), var(--adm-accent-2));
  transform:scaleY(0); transform-origin:50% 50%;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.adm-ur-row:hover{
  transform:translateY(-2px);
  border-color:var(--adm-border-hi); background:var(--adm-card-hi);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.85);
}
.adm-ur-row:hover::before{ transform:scaleY(1); }
.adm-ur-row:focus-visible{ outline:2px solid var(--adm-accent); outline-offset:2px; }
.adm-ur-row.is-online::before{
  transform:scaleY(1); background:linear-gradient(180deg, #4ade80, var(--adm-success));
}
.adm-ur-row.is-online{ background:linear-gradient(90deg, rgba(52,211,153,.055), transparent 42%), var(--adm-card); }

/* avatar + presence dot */
/* 48, not 44: the 1px border on each side makes the content box 2px narrower
   than the declared size, and the initial at 17px + letter-spacing needs 45px.
   At 44 the glyph overflowed its own disc on every row in the list. */
.adm-ur-av{
  position:relative; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  font-size:17px; font-weight:800; color:#fff; letter-spacing:.2px;
  background:linear-gradient(140deg, #3b4152, #262b38);
  border:1px solid var(--adm-border);
}
.adm-ur-row.is-online .adm-ur-av{
  background:linear-gradient(140deg, var(--adm-accent), #e0653a);
  border-color:transparent;
}
.adm-ur-pres{
  position:absolute; right:-3px; bottom:-3px;
  width:12px; height:12px; border-radius:50%;
  background:var(--adm-muted); opacity:.65;
  border:2.5px solid var(--adm-card);
}
.adm-ur-row.is-online .adm-ur-pres{
  background:var(--adm-success); opacity:1;
  animation:admUrPulse 2.2s ease-out infinite;
}

/* identity */
.adm-ur-who{ min-width:0; }
.adm-ur-name{
  display:flex; align-items:center; gap:7px;
  font-size:15.8px; font-weight:750; color:var(--adm-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adm-ur-tag{
  flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.6px;
  padding:2px 6px; border-radius:5px;
  color:var(--adm-accent); background:rgba(255,138,91,.14);
  border:1px solid rgba(255,138,91,.32);
}
.adm-ur-sub{
  font-size:13.5px; font-weight:600; color:var(--adm-muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adm-ur-sub .mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; opacity:.85; }
.adm-ur-sep{ opacity:.45; }
/* the Telegram id doubles as a copy button */
.adm-ur-id{
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  padding:1px 5px; margin:0 -3px; border-radius:6px;
  background:transparent; border:1px solid transparent;
  color:inherit; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px; font-weight:600;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.adm-ur-id:hover{ color:var(--adm-accent); background:rgba(255,138,91,.1); border-color:rgba(255,138,91,.28); }
.adm-ur-copy{ font-style:normal; font-size:12px; opacity:0; transition:opacity .14s ease; }
.adm-ur-id:hover .adm-ur-copy{ opacity:.85; }

/* chips: device + access */
.adm-ur-chip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  padding:4px 9px; border-radius:8px;
  font-size:13.5px; font-weight:700; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border:1px solid var(--adm-border); color:var(--adm-muted);
  background:rgba(255,255,255,.04);
}
.adm-ur-chip.dev.is-mobile { color:#a5a6ff; background:rgba(139,140,247,.13); border-color:rgba(139,140,247,.3); }
.adm-ur-chip.dev.is-tablet { color:#7dd3fc; background:rgba(56,189,248,.12);  border-color:rgba(56,189,248,.3); }
.adm-ur-chip.dev.is-desktop{ color:#67e8f9; background:rgba(34,211,238,.11);  border-color:rgba(34,211,238,.28); }
.adm-ur-chip.dev.is-unknown{ opacity:.7; }
.adm-ur-chip.prem{
  color:var(--adm-accent-2); background:rgba(251,191,36,.14); border-color:rgba(251,191,36,.32);
}
.adm-ur-chip.prem.lifetime{
  color:#0d0e13; border-color:transparent; font-weight:800;
  background:linear-gradient(100deg, var(--adm-accent-2), #f59e0b);
}
.adm-ur-chip.prem.expiring{
  color:#fca5a5; background:rgba(248,113,134,.13); border-color:rgba(248,113,134,.32);
}
.adm-ur-chip.free{ color:var(--adm-muted); }
/* A membership that has EXPIRED. Deliberately quieter than .prem.expiring —
   that one is amber-red because it is a deadline you can still act on; this is
   a fact about the past, and a roster where every expired account shouts would
   bury the accounts that are actually about to lapse. Slate reads as "was a
   customer" against the plain grey of never-paid. */
.adm-ur-chip.ended{
  color:#cbd5e1; background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.32);
}

/* activity / last seen */
.adm-ur-seen{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.adm-ur-seen b{
  font-size:14.5px; font-weight:750; color:var(--adm-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adm-ur-seen b.is-live{ color:var(--adm-success); }
.adm-ur-seen span{
  font-size:13px; font-weight:600; color:var(--adm-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* actions */
.adm-ur-act{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.adm-ur-btn{
  padding:0 13px; height:36px; border-radius:9px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:750; white-space:nowrap;
  color:#fff; border:1px solid transparent;
  background:linear-gradient(100deg, var(--adm-accent), var(--adm-accent-2));
  box-shadow:0 6px 16px -10px rgba(255,138,91,.95);
  transition:transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s ease,
             filter .16s ease, background .16s ease;
}
.adm-ur-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 10px 22px -10px rgba(255,138,91,.95); }
.adm-ur-btn:active{ transform:translateY(0) scale(.97); }
/* already premium → the action is management, so step it back to an outline */
.adm-ur-btn.is-on{
  color:var(--adm-accent-2); background:rgba(251,191,36,.1);
  border-color:rgba(251,191,36,.34); box-shadow:none;
}
.adm-ur-btn.is-on:hover{ background:rgba(251,191,36,.18); border-color:rgba(251,191,36,.6); }
.adm-ur-go{
  font-size:21px; line-height:1; color:var(--adm-muted); opacity:.5;
  transition:transform .18s cubic-bezier(.22,1,.36,1), opacity .18s ease;
}
.adm-ur-row:hover .adm-ur-go{ opacity:1; transform:translateX(3px); color:var(--adm-accent); }

/* empty state */
.adm-ur-empty{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:54px 20px; border-radius:16px; text-align:center;
  border:1px dashed var(--adm-border); background:rgba(255,255,255,.015);
  animation:admUrIn .35s ease both;
}
.adm-ur-empty span{ font-size:28px; opacity:.55; }
.adm-ur-empty b{ font-size:16px; font-weight:750; color:var(--adm-text); }
.adm-ur-empty i{ font-style:normal; font-size:14.5px; color:var(--adm-muted); }
.adm-ur-empty-btn{
  margin-top:12px; padding:0 18px; height:42px; border-radius:11px; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:750; color:#fff; border:0;
  background:linear-gradient(100deg, var(--adm-accent), var(--adm-accent-2));
  box-shadow:0 10px 22px -12px rgba(255,138,91,.95);
  transition:transform .16s ease, box-shadow .16s ease;
}
.adm-ur-empty-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -12px rgba(255,138,91,1); }
.adm-ur-empty-btn:active{ transform:translateY(0); }

/* ------------------------------------------------- premium grant popover */
.adm-gp{
  position:fixed; z-index:4000; width:262px;
  padding:14px; border-radius:16px;
  background:var(--adm-card-hi); border:1px solid var(--adm-border-hi);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03);
  opacity:0; transform:translateY(-8px) scale(.96); transform-origin:top right;
  transition:opacity .16s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
.adm-gp.open{ opacity:1; transform:none; }
.adm-gp-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:11px; }
.adm-gp-head b{
  font-size:15.5px; font-weight:750; color:var(--adm-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.adm-gp-head span{ font-size:13px; font-weight:600; color:var(--adm-muted); }
/* names the intent of the presets, so a cash sale isn't logged as a comp */
.adm-gp-label{
  display:flex; align-items:baseline; gap:5px; margin:0 2px 7px;
  font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--adm-muted);
}
.adm-gp-label i{ font-style:normal; font-weight:600; letter-spacing:.2px; opacity:.7; text-transform:none; }
/* hand-off to Finance, which books revenue as well as granting access */
.adm-gp-cash{
  width:100%; height:38px; margin-top:9px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:750; border-radius:9px;
  color:var(--adm-success); background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.3);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.adm-gp-cash:hover{ background:rgba(52,211,153,.2); border-color:var(--adm-success); transform:translateY(-1px); }
.adm-gp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.adm-gp-grid button,
.adm-gp-life,
.adm-gp-custom button{
  cursor:pointer; font-family:inherit; font-weight:750;
  border-radius:9px; transition:all .15s ease;
}
.adm-gp-grid button{
  height:40px; font-size:14.5px;
  color:var(--adm-text); background:rgba(255,255,255,.05);
  border:1px solid var(--adm-border);
}
.adm-gp-grid button:hover{
  color:#fff; border-color:transparent; transform:translateY(-1px);
  background:linear-gradient(100deg, var(--adm-accent), var(--adm-accent-2));
}
.adm-gp-life{
  width:100%; height:42px; margin-top:7px; font-size:14.5px; font-weight:800;
  color:#0d0e13; border:1px solid transparent;
  background:linear-gradient(100deg, var(--adm-accent-2), #f59e0b);
  box-shadow:0 8px 20px -12px rgba(251,191,36,.95);
}
.adm-gp-life:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.adm-gp-custom{ display:flex; gap:7px; margin-top:9px; }
.adm-gp .adm-gp-custom input{
  flex:1; min-width:0; height:38px; padding:0 10px; border-radius:9px;
  font-family:inherit; font-size:14.5px; font-weight:650;
  color:var(--adm-text); background:rgba(0,0,0,.22);
  border:1px solid var(--adm-border); outline:none;
}
.adm-gp .adm-gp-custom input:focus{ border-color:var(--adm-border-hi); }
.adm-gp-custom button{
  height:38px; padding:0 13px; font-size:14px;
  color:var(--adm-text); background:rgba(255,255,255,.06);
  border:1px solid var(--adm-border);
}
.adm-gp-custom button:hover{ color:#fff; background:var(--adm-accent); border-color:transparent; }
/* The date row is the second .adm-gp-custom. Chrome renders a date input's own
   calendar glyph in a near-black that vanishes on this panel, and its intrinsic
   width is wider than the flex basis, so it pushed the button off the edge. */
.adm-gp .adm-gp-custom input[type="date"]{ min-width:0; width:100%; color-scheme:dark; }
.adm-gp .adm-gp-custom input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(.7); cursor:pointer;
}
/* Optional, so it reads quieter than the fields that actually grant something. */
.adm-gp-note{
  width:100%; height:36px; margin-top:9px; padding:0 10px; border-radius:9px;
  font-family:inherit; font-size:14px; font-weight:600;
  color:var(--adm-text); background:rgba(0,0,0,.18);
  border:1px dashed var(--adm-border); outline:none;
}
.adm-gp-note::placeholder{ color:var(--adm-muted); opacity:.75; }
.adm-gp-note:focus{ border-style:solid; border-color:var(--adm-border-hi); background:rgba(0,0,0,.28); }

.adm-gp-revoke{
  width:100%; height:33px; margin-top:11px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:750; border-radius:9px;
  color:var(--adm-danger); background:rgba(248,113,134,.09);
  border:1px solid rgba(248,113,134,.28);
  transition:all .15s ease;
}
.adm-gp-revoke:hover{ background:rgba(248,113,134,.2); border-color:var(--adm-danger); }

:root[data-theme="light"] .adm-gp .adm-gp-custom input[type="date"]{ color-scheme:light; }
:root[data-theme="light"] .adm-gp .adm-gp-custom input[type="date"]::-webkit-calendar-picker-indicator{
  filter:none;
}
:root[data-theme="light"] .adm-gp-note{ background:rgba(30,40,80,.04); }

/* ------------------------------------------------------------- animations */
@keyframes admUrIn{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@keyframes admUrPulse{
  0%  { box-shadow:0 0 0 0   rgba(52,211,153,.5); }
  70% { box-shadow:0 0 0 7px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0   rgba(52,211,153,0); }
}
@keyframes admUrShimmer{
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}
/* fires once on the row whose access tier just changed */
@keyframes admUrFlash{
  0%  { background:rgba(251,191,36,.3);  border-color:var(--adm-accent-2); }
  100%{ background:var(--adm-card);      border-color:var(--adm-border); }
}
.adm-ur-row.flash{ animation:admUrFlash 1.3s ease-out both; }

@media (prefers-reduced-motion: reduce){
  .adm-ur-row, .adm-ur-stat, .adm-ur-empty{ animation:none; }
  .adm-ur-livedot, .adm-ur-row.is-online .adm-ur-pres, .adm-ur-skel::after{ animation:none; }
  .adm-ur-row:hover{ transform:none; }
}

/* ------------------------------------------------------------ light theme */
:root[data-theme="light"] .adm-ur-row{
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
:root[data-theme="light"] .adm-ur-row:hover{
  box-shadow:0 14px 28px -20px rgba(15,23,42,.5);
}
:root[data-theme="light"] .adm-ur-row.is-online{
  background:linear-gradient(90deg, rgba(16,185,129,.07), transparent 42%), var(--adm-card);
}
:root[data-theme="light"] .adm-ur-av{ background:linear-gradient(140deg, #94a3b8, #64748b); }
:root[data-theme="light"] .adm-ur-pres{ border-color:#fff; }
:root[data-theme="light"] .adm-ur-seg span{ background:rgba(15,23,42,.07); }
:root[data-theme="light"] .adm-ur-more span{ background:rgba(15,23,42,.06); }
:root[data-theme="light"] .adm-ur-skel::after{ background:linear-gradient(90deg, transparent, rgba(15,23,42,.05), transparent); }
:root[data-theme="light"] .adm-ur-id:hover{ color:#c2410c; background:rgba(255,138,91,.12); }
:root[data-theme="light"] .adm-ur-chip{ background:rgba(15,23,42,.04); }
/* amber-on-white is unreadable (1.5:1) — darken every accent used as TEXT */
:root[data-theme="light"] .adm-ur-chip.prem{ color:#a16207; background:rgba(251,191,36,.18); border-color:rgba(180,120,10,.35); }
:root[data-theme="light"] .adm-ur-chip.prem.lifetime{ color:#3b2500; }
:root[data-theme="light"] .adm-ur-chip.prem.expiring{ color:#b91c1c; background:rgba(248,113,134,.14); }
:root[data-theme="light"] .adm-ur-chip.ended{ color:#475569; background:rgba(100,116,139,.13); border-color:rgba(100,116,139,.3); }
:root[data-theme="light"] .adm-ur-chip.dev.is-mobile { color:#4f46e5; background:rgba(99,102,241,.12); }
:root[data-theme="light"] .adm-ur-chip.dev.is-tablet { color:#0369a1; background:rgba(56,189,248,.14); }
:root[data-theme="light"] .adm-ur-chip.dev.is-desktop{ color:#0e7490; background:rgba(34,211,238,.14); }
:root[data-theme="light"] .adm-ur-tag{ color:#c2410c; background:rgba(255,138,91,.15); }
:root[data-theme="light"] .adm-ur-seen b.is-live{ color:#047857; }
:root[data-theme="light"] .adm-ur-stat.live .adm-ur-stat-num{ color:#047857; }
:root[data-theme="light"] .adm-ur-btn.is-on{ color:#a16207; background:rgba(251,191,36,.16); border-color:rgba(180,120,10,.4); }
:root[data-theme="light"] .adm-ur-go{ color:#94a3b8; }
/* beats `:root[data-theme="light"] .admin input|select{background:#fff}` from
   14-admin-light — that rule is (0,3,1), so a two-class selector here loses and
   the field renders as a hard white box inside its rounded pill. */
:root[data-theme="light"] .adm-ur .adm-ur-search input,
:root[data-theme="light"] .adm-ur .adm-ur-sort select{ background:transparent; border:0; }
:root[data-theme="light"] .adm-gp{ box-shadow:0 26px 60px -22px rgba(15,23,42,.45); }
:root[data-theme="light"] .adm-gp-grid button{ background:rgba(15,23,42,.05); }
:root[data-theme="light"] .adm-gp .adm-gp-custom input{ background:#fff; }
:root[data-theme="light"] .adm-gp-custom button{ background:rgba(15,23,42,.06); }
:root[data-theme="light"] .adm-gp-cash{ color:#047857; background:rgba(16,185,129,.12); border-color:rgba(4,120,87,.32); }
:root[data-theme="light"] .adm-ur-empty{ background:rgba(15,23,42,.02); }
:root[data-theme="light"] .adm-ur-row.flash{ animation-name:admUrFlashLight; }
@keyframes admUrFlashLight{
  0%  { background:rgba(251,191,36,.35); border-color:#f59e0b; }
  100%{ background:var(--adm-card);      border-color:var(--adm-border); }
}

/* ------------------------------------------------------------- responsive */
/* Below the full six-column grid the row folds into two lines:
     line 1 — avatar · name · premium button
     line 2 — device · access · activity
   The ::after with flex-basis:100% is the line break between them. */
@media (max-width: 1080px){
  .adm-ur-head{ display:none; }
  .adm-ur-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px;
  }
  .adm-ur-row::after{ content:""; flex:0 0 100%; height:0; order:4; }
  .adm-ur-av  { order:1; flex:0 0 auto; }
  .adm-ur-who { order:2; flex:1 1 130px; min-width:0; }
  .adm-ur-act { order:3; flex:0 0 auto; margin-left:auto; }
  .adm-ur-dev { order:5; flex:0 0 auto; max-width:100%; }
  .adm-ur-acc { order:6; flex:0 0 auto; }
  .adm-ur-seen{
    order:7; flex:1 1 auto; min-width:0;
    flex-direction:row; align-items:baseline; gap:6px;
    justify-content:flex-end; text-align:right;
  }
}
@media (max-width: 720px){
  .adm-ur-stats{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .adm-ur-stat{ padding:12px 13px; }
  .adm-ur-stat-num{ font-size:24px; }
  /* one horizontal row of filters instead of a wrapped block that eats the fold */
  .adm-ur-segs{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px; margin:0 -2px; width:100%;
  }
  .adm-ur-segs::-webkit-scrollbar{ display:none; }
  .adm-ur-seg{ flex:0 0 auto; }
  .adm-ur-search{ flex:1 1 100%; }
  .adm-ur-sort{ flex:1 1 100%; justify-content:space-between; }
}
@media (max-width: 560px){
  .adm-ur-row{ padding:11px 13px; gap:8px 10px; }
  .adm-ur-go{ display:none; }
  .adm-ur-btn{ height:34px; padding:0 11px; font-size:13.5px; }
  .adm-ur-seen{ flex:1 1 100%; justify-content:flex-start; text-align:left; }
  .adm-gp{ width:min(262px, calc(100vw - 24px)); }
}

/* The comment already on file, shown above the input that edits it. Dashed to
   match .adm-gp-note — same fact, one is the record and one is the editor. */
.adm-gp-prevnote{
  margin-top:10px; padding:8px 10px; border-radius:9px;
  font-size:13.5px; line-height:1.45; color:var(--adm-text);
  background:rgba(251,191,36,.08); border:1px dashed rgba(251,191,36,.32);
}
.adm-gp-prevnote span{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color:var(--adm-accent-2); margin-bottom:3px;
}
.adm-gp-prevnote i{ display:block; font-style:normal; margin-top:3px; font-size:12.5px; color:var(--adm-muted); }
:root[data-theme="light"] .adm-gp-prevnote{ background:rgba(251,191,36,.13); }