/* =========================================================
Friending Admin — styles
Brand accent: cyan from cat.svg (#8CFDFD)
========================================================= */
:root {
/* Lets the browser style native widgets (scrollbars, date picker
popup, autofill) appropriately. Flipped by the theme override. */
color-scheme: dark;
--bg: #0a0d12;
--surface: #12161e;
--card: #171c25;
--card-2: #1d2330;
--border: #252c3a;
--border-2: #2f3849;
--text: #eef2f8;
--muted: #8b94a7;
--muted-2: #5b6377;
--accent: #8CFDFD;
--accent-dim: rgba(140, 253, 253, 0.14);
--accent-glow: rgba(140, 253, 253, 0.32);
--accent-ink: #06343a;
--ok: #46d39a;
--warn: #ffb455;
--danger: #ff6b6b;
--radius: 14px;
--radius-sm: 10px;
--shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.6);
--sidebar-w: 248px;
/* Body background radial-glow tint. Cyan in dark, neutral in light. */
--body-glow: rgba(140, 253, 253, 0.05);
/* Sidebar uses a darker gradient than the body bg in dark mode. */
--sidebar-bg: linear-gradient(180deg, #11151c 0%, #0c1018 100%);
/* Map tile filter — darken OSM tiles to fit dark theme. Light mode clears it. */
--map-tile-filter: brightness(0.85) saturate(0.9);
--map-empty-bg: #0d1116;
--avatar-placeholder: linear-gradient(135deg, #1f2532 0%, #161b25 100%);
--leaflet-attrib-bg: rgba(15, 18, 24, 0.7);
/* Brand/category text colors that need adjusting on light bg. */
--purple: #b894ff;
--purple-text: #c9b3ff;
--gold: #ffd060;
--gold-ink: #2a1d00;
}
/* =========================================================
Light theme — opt-in via
Keeps the cyan brand identity but swaps surfaces, text and
accent contrast so cyan text on white is readable.
========================================================= */
[data-theme="light"] {
color-scheme: light;
--bg: #f4f6fb;
--surface: #ffffff;
--card: #ffffff;
--card-2: #f6f8fc;
--border: #e2e6ee;
--border-2: #ccd2dd;
--text: #182030;
--muted: #5e677a;
--muted-2: #8a93a6;
/* Cyan is too light against white; use a darker tone for
text, links and chrome. The brand cyan stays alive in
glows and decorative tints. */
--accent: #0a8a93;
--accent-dim: rgba(10, 138, 147, 0.10);
--accent-glow: rgba(10, 138, 147, 0.26);
--accent-ink: #ffffff;
--ok: #168a5d;
--warn: #c47700;
--danger: #c23a32;
--shadow: 0 18px 48px -16px rgba(20, 30, 50, 0.16);
--body-glow: rgba(10, 138, 147, 0.05);
--sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f1f4fa 100%);
--map-tile-filter: none;
--map-empty-bg: #eef1f6;
--avatar-placeholder: linear-gradient(135deg, #eef1f6 0%, #dde3ee 100%);
--leaflet-attrib-bg: rgba(255, 255, 255, 0.8);
--purple: #6a3edb;
--purple-text: #4f23b8;
--gold: #c47700;
--gold-ink: #ffffff;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: radial-gradient(1200px 600px at -10% -10%, var(--body-glow), transparent 60%) , var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
button {
font-family: inherit;
}
/* =========================================================
Sign-in
========================================================= */
.login-body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.login-wrap {
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
align-items: center;
}
.login-brand {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.login-logo {
width: 56px;
height: 56px;
filter: drop-shadow(0 0 24px var(--accent-glow));
}
.login-brand-text {
line-height: 1.1;
}
.login-brand-text strong {
display: block;
font-size: 22px;
color: var(--text);
font-weight: 700;
letter-spacing: -0.01em;
}
.login-brand-text span {
display: block;
font-size: 13px;
color: var(--accent);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-top: 2px;
}
.login-card {
width: 100%;
background: linear-gradient(180deg, var(--card) 0%, var(--surface) 100%);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 26px 22px;
box-shadow: var(--shadow);
}
.login-card h1 {
margin: 0 0 4px;
font-size: 20px;
}
.login-card .muted {
font-size: 13px;
margin: 0 0 18px;
}
.login-card label {
display: block;
margin-top: 14px;
}
.login-card label > span {
display: block;
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.login-card input {
width: 100%;
padding: 11px 13px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 15px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.login-card input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-dim);
}
.login-card .btn-primary {
margin-top: 20px;
}
.login-card button.ghost {
margin-top: 10px;
width: 100%;
padding: 11px;
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-weight: 500;
cursor: pointer;
}
.login-card button.ghost:hover {
background: var(--card-2);
color: var(--text);
}
.code-input {
text-align: center;
font-size: 26px !important;
letter-spacing: 0.55em !important;
font-weight: 700 !important;
padding: 16px 12px !important;
font-variant-numeric: tabular-nums;
}
/* =========================================================
App layout (sidebar + main)
========================================================= */
body.app {
display: block;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-w);
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
padding: 22px 16px 16px;
display: flex;
flex-direction: column;
gap: 18px;
z-index: 30;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 6px 16px;
border-bottom: 1px solid var(--border);
}
.brand-logo {
width: 36px;
height: 36px;
filter: drop-shadow(0 0 18px var(--accent-glow));
flex-shrink: 0;
}
.brand-text {
line-height: 1.1;
display: flex;
flex-direction: column;
}
.brand-name {
font-weight: 700;
font-size: 15px;
color: var(--text);
}
.brand-sub {
font-size: 10px;
color: var(--accent);
letter-spacing: 0.22em;
text-transform: uppercase;
margin-top: 3px;
}
.menu {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
color: var(--muted);
font-size: 14px;
font-weight: 500;
transition: background 0.12s, color 0.12s;
position: relative;
}
.menu-item:hover {
background: var(--card);
color: var(--text);
}
.menu-item.active {
background: var(--accent-dim);
color: var(--accent);
}
.menu-item.active::before {
content: "";
position: absolute;
left: -16px;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow);
}
.menu-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: currentColor;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
/* Default — users icon */
}
.menu-icon[data-icon="users"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-item.active .menu-icon[data-icon="users"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-icon[data-icon="shield"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-icon[data-icon="density"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-item.active .menu-icon[data-icon="density"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-item.active .menu-icon[data-icon="shield"],
.menu-group.active .menu-parent .menu-icon[data-icon="shield"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-icon[data-icon="msg"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-group.active .menu-parent .menu-icon[data-icon="msg"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-icon[data-icon="stats"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-item.active .menu-icon[data-icon="stats"] {
background-image: url("data:image/svg+xml;utf8,");
}
.menu-group {
display: flex;
flex-direction: column;
}
.menu-parent {
cursor: pointer;
user-select: none;
color: var(--muted);
}
.menu-parent:hover { background: var(--card); color: var(--text); }
.menu-group.active .menu-parent { color: var(--accent); }
.menu-group.active .menu-parent::before {
content: "";
position: absolute;
left: -16px;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow);
}
.menu-caret {
margin-left: auto;
width: 10px;
height: 10px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
transition: transform 0.16s ease;
}
.menu-group.open .menu-caret { transform: rotate(90deg); }
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease;
display: flex;
flex-direction: column;
}
.menu-group.open .submenu { max-height: 240px; }
.submenu-item {
padding: 7px 12px 7px 42px;
margin: 1px 0;
color: var(--muted);
font-size: 13px;
border-radius: 8px;
transition: background 0.1s, color 0.1s;
}
.submenu-item:hover {
color: var(--text);
background: var(--card);
}
.submenu-item.active {
color: var(--accent);
background: var(--accent-dim);
}
.menu-item { color: var(--muted); }
.menu-item.active .menu-icon { color: var(--accent); }
/* Some browsers don't honor currentColor inside background-image data
URLs — duplicate it as an opacity dial so the icon still reads. */
.menu-icon { opacity: 0.85; }
.menu-item.active .menu-icon { opacity: 1; }
.sidebar-foot {
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 4px;
}
.signed-as {
color: var(--muted);
font-size: 12px;
padding: 0 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sign-out {
padding: 8px 12px;
color: var(--muted);
font-size: 13px;
border-radius: 8px;
}
.sign-out:hover {
background: var(--card);
color: var(--text);
}
/* Day / night theme toggle — sits in the sidebar foot. The label
updates in JS (`Day mode` vs `Night mode`) so a brand-new admin
can tell at a glance what clicking the button will do. */
.theme-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.theme-toggle:hover {
background: var(--card);
color: var(--text);
border-color: var(--border-2);
}
.theme-toggle-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
/* Moon icon in dark mode; the [data-theme="light"] override below
swaps to a sun glyph. Mask + currentColor lets the icon track
the button's text color on hover. */
background: currentColor;
-webkit-mask: var(--theme-toggle-glyph) no-repeat center / contain;
mask: var(--theme-toggle-glyph) no-repeat center / contain;
--theme-toggle-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' fill='black'/%3E%3C/svg%3E");
}
[data-theme="light"] .theme-toggle-icon {
--theme-toggle-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3Cg stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='2' x2='12' y2='5'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3Cline x1='2' y1='12' x2='5' y2='12'/%3E%3Cline x1='19' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.5' y1='4.5' x2='6.6' y2='6.6'/%3E%3Cline x1='17.4' y1='17.4' x2='19.5' y2='19.5'/%3E%3Cline x1='4.5' y1='19.5' x2='6.6' y2='17.4'/%3E%3Cline x1='17.4' y1='6.6' x2='19.5' y2='4.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile hamburger sits over the top — hidden on desktop */
.mobile-menu-btn {
display: none;
position: fixed;
top: 14px;
left: 14px;
width: 40px;
height: 40px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
z-index: 40;
padding: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.mobile-menu-btn span {
display: block;
width: 16px;
height: 2px;
background: var(--text);
border-radius: 1px;
}
.nav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
z-index: 25;
}
/* Main column shifts right of the sidebar on desktop */
.main {
margin-left: var(--sidebar-w);
padding: 24px 28px 48px;
max-width: 1400px;
}
/* Standalone user-detail page: opens in its own browser tab, so the
sidebar is intentionally absent. Center the content and reclaim the
left gutter that would otherwise sit reserved for the missing nav. */
body.app-detail-standalone .main {
margin-left: 0;
margin-right: auto;
margin-inline: auto;
max-width: 980px;
}
.topbar-detail {
/* Without the "← Back to list" sibling, the title needs a bit of
breathing room on the left so it doesn't hug the viewport edge. */
padding-top: 8px;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
gap: 16px;
}
.page-title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.015em;
}
.topbar-meta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
font-size: 12px;
}
.topbar-meta .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow);
}
.content {
display: flex;
flex-direction: column;
gap: 18px;
}
/* =========================================================
Filter card
========================================================= */
.filter-card,
.results-card {
background: linear-gradient(180deg, var(--card) 0%, var(--surface) 100%);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.filter-card-head {
padding: 16px 20px 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.filter-card-head h2 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.filter-grid {
display: grid;
grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 1fr) auto;
gap: 18px;
padding: 16px 20px 20px;
align-items: end;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.group-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
/* Segmented control (date mode) */
.seg {
display: inline-flex;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 3px;
gap: 2px;
width: fit-content;
}
.seg-btn {
padding: 6px 12px;
background: transparent;
border: 0;
color: var(--muted);
font-size: 13px;
font-weight: 500;
border-radius: 7px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
background: var(--card-2);
color: var(--text);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
/* Light mode: --bg (page) and --card-2 differ by only ~2 luminance
steps, so the active pill barely registers. Bump to plain white
+ an accent-tinted bottom edge so the selection reads clearly. */
[data-theme="light"] .seg-btn.active {
background: #ffffff;
box-shadow: 0 0 0 1px var(--accent-dim) inset, 0 1px 2px rgba(20, 30, 50, 0.08);
color: var(--accent);
}
.mode {
display: flex;
flex-direction: column;
gap: 10px;
}
.quick-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.chip {
padding: 6px 12px;
background: var(--bg);
color: var(--muted);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.chip:hover {
color: var(--text);
border-color: var(--border-2);
}
.chip.active {
background: var(--accent-dim);
color: var(--accent);
border-color: var(--accent);
}
.num-label {
display: flex;
flex-direction: column;
gap: 4px;
}
.num-label > span {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.num-wrap {
display: flex;
align-items: center;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
}
.num-wrap:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-dim);
}
.num-wrap input {
flex: 1;
background: transparent;
border: 0;
padding: 9px 12px;
color: var(--text);
font-size: 14px;
width: 0;
min-width: 0;
}
.num-wrap input:focus { outline: none; }
.num-suffix {
padding: 0 12px;
color: var(--muted);
font-size: 12px;
}
.range-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.range-grid label > span {
display: block;
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.range-grid input[type="date"] {
width: 100%;
padding: 9px 11px;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 13px;
font-family: inherit;
/* color-scheme is inherited from :root / [data-theme] so the
native picker popup follows the active theme automatically. */
}
.range-grid input[type="date"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-dim);
}
/* Toggle (custom checkbox) */
.toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
padding: 4px 0;
}
.toggle input { display: none; }
.toggle .track {
width: 36px;
height: 20px;
background: var(--card-2);
border: 1px solid var(--border-2);
border-radius: 999px;
position: relative;
transition: background 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.toggle .track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
background: var(--muted);
border-radius: 50%;
transition: transform 0.18s ease, background 0.15s;
}
.toggle input:checked + .track {
background: var(--accent-dim);
border-color: var(--accent);
}
.toggle input:checked + .track::after {
transform: translateX(16px);
background: var(--accent);
box-shadow: 0 0 8px var(--accent-glow);
}
.toggle-label {
font-size: 13px;
color: var(--text);
}
.filter-actions {
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.btn-primary {
padding: 10px 18px;
background: var(--accent);
color: var(--accent-ink);
border: 0;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
box-shadow: 0 0 0 1px rgba(140, 253, 253, 0.3), 0 0 24px -8px var(--accent-glow);
transition: transform 0.08s, box-shadow 0.15s;
width: 100%;
}
.btn-primary:hover {
box-shadow: 0 0 0 1px rgba(140, 253, 253, 0.5), 0 0 28px -6px var(--accent-glow);
}
.btn-primary:active { transform: translateY(1px); }
/* =========================================================
Results card
========================================================= */
.results-card {
padding: 4px 4px 8px;
}
.results-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 12px;
gap: 12px;
}
.results-head h2 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
}
.results-head .small {
display: block;
margin-top: 2px;
}
.pager {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 4px;
}
.pager button {
width: 28px;
height: 28px;
background: transparent;
color: var(--muted);
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
transition: background 0.12s, color 0.12s;
}
.pager button:hover:not([disabled]) { background: var(--card-2); color: var(--text); }
.pager button[disabled] { opacity: 0.3; cursor: default; }
#page_label {
padding: 0 8px;
color: var(--muted);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
/* Rows */
.rows {
display: flex;
flex-direction: column;
padding: 0 8px 8px;
}
.row {
display: grid;
grid-template-columns: 48px 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"avatar primary meta"
"avatar secondary meta";
column-gap: 14px;
row-gap: 2px;
padding: 12px 12px;
border-radius: 10px;
transition: background 0.1s;
align-items: center;
}
.row:hover {
background: var(--card-2);
}
.row .avatar {
grid-area: avatar;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--card-2);
border: 1px solid var(--border);
object-fit: cover;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-weight: 600;
font-size: 14px;
overflow: hidden;
}
.row .avatar.no-image {
background: var(--avatar-placeholder);
}
.row .primary {
grid-area: primary;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex-wrap: wrap;
}
.row .display {
font-weight: 600;
font-size: 14px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.row .code {
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.row .code.code-muted {
color: var(--muted-2);
font-style: italic;
}
.user-row-clickable {
cursor: pointer;
transition: background 0.08s;
}
.user-row-clickable:hover {
background: var(--accent-dim);
}
.user-row-clickable .user-actions,
.user-row-clickable .user-actions * {
cursor: default;
}
.user-row-clickable .user-btn { cursor: pointer; }
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 999px;
background: var(--accent-dim);
color: var(--accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.badge::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px var(--accent-glow);
}
.badge.badge-fake {
background: rgba(255, 180, 85, 0.18);
color: var(--warn);
}
.badge.badge-fake::before {
background: var(--warn);
box-shadow: 0 0 6px rgba(255, 180, 85, 0.45);
}
.row .secondary {
grid-area: secondary;
color: var(--muted);
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row .secondary .pin {
color: var(--muted-2);
}
.row .meta {
grid-area: meta;
text-align: right;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
color: var(--muted);
white-space: nowrap;
line-height: 1.4;
}
.row .meta .label {
color: var(--muted-2);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.row .meta .reg {
color: var(--text);
font-weight: 500;
}
/* State views */
.state {
padding: 40px 20px;
text-align: center;
color: var(--muted);
font-size: 13px;
}
.state-error {
color: var(--danger);
}
.state-loading {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 10px;
}
.spinner {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--border-2);
border-top-color: var(--accent);
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error {
background: rgba(255, 107, 107, 0.1);
border: 1px solid rgba(255, 107, 107, 0.3);
color: var(--danger);
padding: 10px 12px;
border-radius: 10px;
font-size: 13px;
margin: 10px 0;
}
/* =========================================================
Admins page
========================================================= */
.add-admin {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 14px 20px 18px;
align-items: stretch;
}
.add-wrap {
overflow: hidden;
}
.add-wrap input {
flex: 1;
background: transparent;
border: 0;
padding: 10px 14px;
color: var(--text);
font-size: 14px;
width: 100%;
}
.add-wrap input:focus { outline: none; }
.add-admin .btn-primary {
width: auto;
padding: 10px 22px;
}
.admin-row {
grid-template-columns: 48px 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"avatar primary actions"
"avatar secondary actions";
}
.admin-actions {
grid-area: actions;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.mini-btn {
padding: 5px 11px;
background: var(--bg);
color: var(--muted);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.mini-btn:hover {
color: var(--text);
border-color: var(--border-2);
background: var(--card-2);
}
.mini-btn.danger {
color: var(--danger);
border-color: rgba(255, 107, 107, 0.3);
}
.mini-btn.danger:hover {
background: rgba(255, 107, 107, 0.1);
color: var(--danger);
border-color: rgba(255, 107, 107, 0.55);
}
.pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pill::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.pill-ok {
background: rgba(70, 211, 154, 0.13);
color: var(--ok);
}
.pill-muted {
background: rgba(139, 148, 167, 0.12);
color: var(--muted);
}
.pill-danger {
background: rgba(255, 107, 107, 0.13);
color: var(--danger);
}
/* =========================================================
Filter search row + summary bar
========================================================= */
.filter-grid-search {
grid-template-columns: 1fr 1fr;
padding-bottom: 0;
align-items: end;
}
.filter-grid-search input[type="search"],
.filter-grid-search input[type="text"] {
width: 100%;
padding: 9px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
font-size: 14px;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-grid-search input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--accent-dim);
}
.summary-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 20px;
background: linear-gradient(180deg, var(--card) 0%, var(--surface) 100%);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.summary-stat {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
.summary-num {
font-size: 28px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.summary-label {
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.summary-sep { color: var(--muted-2); }
.summary-pagesize {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.summary-pagesize label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 11px;
}
/* =========================================================
Density page — mode switch, autocomplete, slider, map, groups
========================================================= */
/* Mode switch (City / Density toggle cards) */
.mode-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Wrap is positioning context for the absolutely-placed `?` help
button — keeps the help out of the button tag (HTML doesn't allow
nested