/* ============================================================
* disdex — Discord-native theme
* ============================================================ */
.pfp-enlarge { display: inline-flex; flex-shrink: 0; border-radius: 50%; cursor: zoom-in; }
.pfp-enlarge:focus-visible { outline: 3px solid var(--blurple); outline-offset: 4px; }
.pfp-enlarge:hover .icon-lg { border-color: var(--blurple); }
.pfp-viewer {
margin: auto;
padding: 48px 16px 16px;
max-width: calc(100vw - 24px);
max-height: calc(100dvh - 24px);
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-darkest);
color: var(--text);
box-shadow: 0 16px 64px #0008;
}
.pfp-viewer::backdrop { background: #000c; }
.pfp-viewer-image {
display: block;
width: min(512px, calc(100vw - 64px), calc(100dvh - 120px));
max-width: 100%;
aspect-ratio: 1;
object-fit: contain;
border-radius: 6px;
}
.pfp-viewer-close {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 6px;
background: var(--bg-light);
color: var(--text);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.pfp-viewer-close:hover { background: var(--bg-lighter); }
.pfp-viewer-close:focus-visible { outline: 2px solid var(--blurple); outline-offset: 2px; }
:root {
--blurple: #7289da;
--blurple-hover: #677bc4;
--bg-darkest: #1e2124;
--bg-dark: #23272a;
--bg: #2c2f33;
--bg-light: #36393f;
--bg-lighter: #40444b;
--border: #40444b;
--text: #dcddde;
--text-muted: #99aab5;
--text-dim: #72767d;
--green: #43b581;
--yellow: #faa61a;
--red: #f04747;
/* Locked topbar height — drives the sidebar's sticky offset so it doesn't
"settle" when you start scrolling. Update if topbar contents change. */
--topbar-h: 57px;
--main-pad: 24px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg-dark);
color: var(--text);
color-scheme: dark; /* native dark form controls (date pickers, scrollbars) */
font-family: "gg sans", "Whitney", -apple-system, BlinkMacSystemFont,
"Segoe UI", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blurple); }
/* ----- top bar ----- */
.topbar {
border-bottom: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 10;
min-height: var(--topbar-h);
box-sizing: border-box;
}
.topbar-inner {
/* Wider on big monitors so the data tables breathe — the previous 1280px
cap was leaving ~1000px of empty page on a 2560px screen. 1800px keeps
line lengths sane while letting tables actually use the room. Topbar
follows main so the brand+nav stay aligned with the content below. */
max-width: 1800px;
margin: 0 auto;
padding: 10px 24px;
display: flex;
align-items: center;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.brand:hover { color: inherit; }
.brand-logo {
width: 36px;
height: 36px;
display: block;
filter: drop-shadow(0 2px 6px rgba(114, 137, 218, 0.35));
}
.brand-name { font-weight: 700; font-size: 19px; line-height: 1; }
.brand-sub {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 3px;
}
.nav {
display: flex;
gap: 2px;
flex: 1;
}
.nav a {
padding: 8px 14px;
border-radius: 6px;
color: var(--text-muted);
font-weight: 500;
font-size: 14px;
transition: background 0.12s, color 0.12s;
}
.nav a:hover {
background: var(--bg-light);
color: var(--text);
}
.nav a.active {
background: var(--bg-lighter);
color: var(--text);
}
.login-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--blurple);
color: #fff;
font-weight: 600;
font-size: 14px;
border-radius: 6px;
transition: background 0.12s;
flex-shrink: 0;
}
.login-btn:hover { background: var(--blurple-hover); color: #fff; }
.login-btn svg { width: 18px; height: 18px; }
.user-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px 4px 4px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 32px;
flex-shrink: 0;
}
.user-pill-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 4px 0 0;
}
.user-pill-link:hover { color: inherit; }
.user-pill .icon {
width: 28px;
height: 28px;
border-radius: 50%;
}
.user-pill-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.logout-btn {
font-size: 12px;
color: var(--text-dim);
padding: 2px 8px;
border-radius: 4px;
border-left: 1px solid var(--border);
margin-left: 4px;
}
.logout-btn:hover { color: var(--red); background: var(--bg-lighter); }
/* ----- main layout ----- */
main {
max-width: 1800px;
margin: 0 auto;
padding: 24px;
}
.page-h {
font-size: 22px;
font-weight: 700;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.page-sub { color: var(--text-muted); margin: 0 0 24px; font-size: 14px; }
/* /servers/{topic} SEO landing-page intro paragraph */
.topic-intro {
color: var(--text-muted);
margin: 8px 0 22px;
max-width: 68ch;
line-height: 1.6;
font-size: 15px;
}
/* Topic refinements submit ordinary URLs and work without JavaScript. */
.topic-refinements {
display: flex;
align-items: end;
flex-wrap: wrap;
gap: 12px;
margin: 16px 0;
}
.topic-refinements label { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
.topic-refinements select {
max-width: 100%;
padding: 8px 10px;
color: var(--text);
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 6px;
}
.topic-refinement-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; font-size: 13px; color: var(--text-muted); }
.topic-refinement-links a { color: var(--blurple); }
.topic-refinement-links a:hover { text-decoration: underline; }
/* /servers/{topic} — visitor-facing server card grid */
.topic-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 12px;
}
.related-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.related-more {
color: var(--blurple);
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
}
.related-more:hover { text-decoration: underline; }
.server-card {
display: flex;
flex-direction: column;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
overflow: hidden;
transition: border-color .12s, transform .12s;
}
.server-card:hover {
border-color: var(--blurple);
color: inherit;
transform: translateY(-2px);
}
.server-card-banner {
height: 88px;
background: var(--bg-light);
overflow: hidden;
/* Contain the blurred-icon backdrop's stacking context (it uses transform:
scale, which otherwise paints ABOVE the icon that pokes up from the card
body). z-index 0 here + z-index 1 on .server-card-main keeps the banner
strictly behind the icon for both the ![]()
and the blurred variants. */
position: relative;
z-index: 0;
}
.server-card-banner-img,
.server-card-banner-blur,
.server-card-banner-blank {
width: 100%;
height: 100%;
display: block;
}
.server-card-banner-img { object-fit: cover; }
.server-card-banner-blur {
background-size: cover;
background-position: center;
filter: blur(20px) saturate(1.3);
transform: scale(1.4);
}
.server-card-main {
display: flex;
flex-direction: column;
gap: 8px;
/* top padding pins the name a guaranteed gap below the banner; the icon
pokes up over the banner via its own negative margin (below). */
padding: 12px 14px 14px;
flex: 1;
/* Above the banner (incl. the transformed blur backdrop) so the icon wins. */
position: relative;
z-index: 1;
}
.server-card-top { display: flex; align-items: flex-start; gap: 10px; }
.server-card-top .icon {
width: 52px;
height: 52px;
margin-top: -34px;
border: 3px solid var(--bg);
border-radius: 15px;
background: var(--bg);
}
.server-card-head { min-width: 0; flex: 1; padding-bottom: 3px; }
.server-card-name {
font-weight: 600;
font-size: 15px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.server-card-vanity { font-size: 12px; color: var(--text-dim); }
.server-card-desc {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.server-card-stats {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: auto;
padding-top: 2px;
font-size: 12px;
color: var(--text-muted);
}
.server-card-stat { display: flex; align-items: center; gap: 5px; }
.server-card-stat b { color: var(--text); font-weight: 600; }
.server-card-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
display: inline-block;
}
.card-loader {
grid-column: 1 / -1;
text-align: center;
padding: 14px;
color: var(--text-muted);
font-size: 13px;
}
@media (max-width: 760px) {
.topic-cards { grid-template-columns: 1fr; }
}
/* ----- stats strip ----- */
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 0 0 24px;
}
.stat {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 18px;
display: block;
color: inherit;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
a.stat:hover {
background: var(--bg-light);
border-color: var(--blurple);
color: inherit;
transform: translateY(-1px);
}
.stat-num {
font-size: 22px;
font-weight: 700;
color: var(--blurple);
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.stat-label {
color: var(--text-dim);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-top: 4px;
font-weight: 600;
}
.public-stats-page > .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.public-stats-page > .stats .stat { min-width: 0; }
.public-stats-page .stat-num { font-size: clamp(14px, 4vw, 22px); letter-spacing: -.02em; }
.stats-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.stats-chart-grid > section { min-width: 0; }
.stats-chart-grid .feed-h { margin-bottom: 8px; }
.stats-chart-grid .topic-intro { font-size: 13px; margin: 0 0 16px; }
.stats-chart-grid .chart-x-label:last-child { transform: translateX(-100%); }
.stats-traffic { margin-top: 48px; }
.stats-traffic > .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-traffic > .stats .stat { min-width: 0; }
.stats-traffic .stats-subnote { margin: 16px 0 4px; }
.stats-breakdown-row { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) max-content; gap: 12px; align-items: center; padding: 8px 0; font-size: 13px; }
.stats-breakdown-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.stats-breakdown-fill { height: 100%; background: var(--blurple); border-radius: 4px; }
@media (max-width: 800px) {
.stats-chart-grid { grid-template-columns: minmax(0, 1fr); }
.public-stats-page > .stats, .stats-traffic > .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.public-stats-page > .stats .stat, .stats-traffic > .stats .stat { padding: 12px 10px; }
.stats-breakdown-row { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) max-content; gap: 8px; font-size: 12px; }
}
/* ----- live feed ----- */
.feed-h {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 24px 0 12px;
}
.feed-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 0 0 rgba(240, 71, 71, 0.6);
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(240, 71, 71, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(240, 71, 71, 0); }
100% { box-shadow: 0 0 0 0 rgba(240, 71, 71, 0); }
}
.feed { display: flex; flex-direction: column; gap: 6px; }
.feed-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
}
.feed-item .icon {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
background: var(--bg-light);
object-fit: cover;
}
.feed-item .icon-fallback {
display: grid;
place-items: center;
color: var(--text-muted);
font-weight: 700;
}
.feed-body { flex: 1; min-width: 0; }
.feed-title {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.feed-title strong {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
}
.feed-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.feed-arrow { color: var(--text-dim); margin: 0 4px; }
.feed-old { color: var(--text-dim); text-decoration: line-through; }
.feed-new { color: var(--text); font-weight: 600; }
.badge {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.badge-new { background: rgba(67, 181, 129, 0.18); color: var(--green); }
.badge-renamed { background: rgba(250, 166, 26, 0.18); color: var(--yellow); }
.badge-user { background: rgba(114, 137, 218, 0.18); color: var(--blurple); }
.feed-time {
color: var(--text-dim);
font-size: 12px;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* ----- server / user / game cards (used on listing pages) ----- */
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
}
.card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.card:hover {
background: var(--bg-light);
border-color: var(--blurple);
color: inherit;
transform: translateY(-1px);
}
.icon {
width: 48px;
height: 48px;
border-radius: 12px;
flex-shrink: 0;
background: var(--bg-light);
object-fit: cover;
}
.icon-fallback {
display: grid;
place-items: center;
color: var(--text-muted);
font-weight: 700;
font-size: 20px;
background: var(--bg-lighter);
}
.card-body { flex: 1; min-width: 0; }
.card-name {
font-weight: 600;
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ----- table view (with sidebar) ----- */
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 18px;
align-items: start;
}
@media (max-width: 760px) {
.layout { grid-template-columns: 1fr; }
}
.sidebar {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px;
position: sticky;
/* Stick at the sidebar's *natural* offset — topbar height plus main's
24px top padding — so it never rises into the topbar gap as you
scroll. The filter card stays exactly where it starts. (Locking at
just var(--topbar-h) let it scroll up 24px before engaging, which
read as an annoying "unpin".) */
top: calc(var(--topbar-h) + 24px);
/* A filter list taller than the window scrolls inside the card rather
than running off the bottom of the screen (a sticky box can't be
scrolled by the page). 24px clear above (main's padding) and below. */
max-height: calc(100vh - var(--topbar-h) - 48px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.sidebar-h {
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.07em;
margin: 0 0 12px;
}
.filter-form { display: flex; flex-direction: column; gap: 12px; }
/* Apply / Reset stay pinned to the bottom of the card while the fields
scroll behind them, so a long form never hides its own submit button.
Negative offsets cancel the card's 16px padding: sticky insets count from
the padding edge, so `bottom: -16px` puts the bar flush with the card's
bottom and the side margins stretch it edge to edge. */
.filter-actions {
position: sticky;
bottom: -16px;
z-index: 1;
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 -16px;
padding: 12px 16px;
background: var(--bg);
border-top: 1px solid var(--border);
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.field-row { display: flex; gap: 6px; }
.field input, .field select {
width: 100%;
padding: 6px 10px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
}
.field input:focus, .field select:focus { border-color: var(--blurple); }
.field input[type=date]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.field label.check {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 400;
color: var(--text);
text-transform: none;
letter-spacing: 0;
cursor: pointer;
}
.field label.check input { width: auto; margin: 0; cursor: pointer; }
/* ---- two-handle range slider (see dual_range / RANGE_SLIDER_JS) ----
Two native sliders stacked on one rail. The inputs themselves ignore the
pointer so the lower one stays reachable everywhere except under the upper
one's thumb; only the thumbs take events, which is also why the rail can't
be clicked to jump. */
.range { display: flex; flex-direction: column; gap: 4px; }
.range-out {
font-size: 13px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.range-rail { position: relative; height: 20px; }
.range-rail::before {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 4px;
margin-top: -2px;
border-radius: 2px;
background: var(--bg-lighter);
}
.range-fill {
position: absolute;
top: 50%;
height: 4px;
margin-top: -2px;
border-radius: 2px;
background: var(--blurple);
}
.field .range input[type=range] {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 20px;
margin: 0;
padding: 0;
border: 0;
background: none;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.range input[type=range]::-webkit-slider-runnable-track { height: 20px; background: none; }
.range input[type=range]::-moz-range-track { height: 20px; background: none; border: 0; }
.range input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
pointer-events: auto;
width: 16px;
height: 16px;
margin-top: 2px;
border: 2px solid var(--bg-dark);
border-radius: 50%;
background: var(--text);
cursor: grab;
}
.range input[type=range]::-moz-range-thumb {
pointer-events: auto;
width: 16px;
height: 16px;
border: 2px solid var(--bg-dark);
border-radius: 50%;
background: var(--text);
cursor: grab;
}
.range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #7289da80; }
.range input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #7289da80; }
.range-ends {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.filter-apply {
padding: 8px 14px;
background: var(--blurple);
color: #fff;
font-weight: 600;
font-size: 13px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.filter-apply:hover { background: var(--blurple-hover); }
.filter-reset {
font-size: 12px;
color: var(--text-dim);
text-align: center;
padding: 4px;
}
.filter-reset:hover { color: var(--blurple); }
/* ----- tag-badge icon picker ----- */
.badge-picker { position: relative; }
.badge-picker-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 10px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 13px;
font-family: inherit;
cursor: pointer;
text-align: left;
}
.badge-picker-btn:hover { border-color: var(--blurple); }
.badge-picker-img { width: 20px; height: 20px; border-radius: 4px; }
.badge-picker-caret { margin-left: auto; color: var(--text-dim); font-size: 10px; }
.badge-grid {
position: absolute;
z-index: 30;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 244px;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 8px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.badge-grid[hidden] { display: none; }
.badge-opt {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
padding: 4px;
background: var(--bg-light);
border: 1px solid transparent;
border-radius: 6px;
color: var(--text-dim);
font-size: 11px;
cursor: pointer;
}
.badge-opt:hover { border-color: var(--blurple); background: var(--bg-lighter); }
.badge-opt.is-sel { border-color: var(--blurple); background: var(--bg-lighter); }
.badge-opt img { width: 26px; height: 26px; border-radius: 4px; display: block; }
.badge-opt-any {
grid-column: 1 / -1;
aspect-ratio: auto;
padding: 7px;
font-weight: 600;
color: var(--text-muted);
}
/* ----- column toggles ----- */
.column-toggle {
margin-top: 8px;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.column-toggle-summary {
cursor: pointer;
font-size: 11px;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.07em;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
user-select: none;
padding: 2px 0;
}
.column-toggle-summary::-webkit-details-marker { display: none; }
.column-toggle-summary::before {
content: "▸";
font-size: 9px;
color: var(--text-muted);
transition: transform 0.1s;
display: inline-block;
}
.column-toggle[open] > .column-toggle-summary::before {
transform: rotate(90deg);
}
.column-toggle-summary:hover { color: var(--text); }
.col-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 10px;
padding-left: 2px;
}
.col-toggle {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text);
cursor: pointer;
padding: 2px 0;
}
.col-toggle input { margin: 0; cursor: pointer; }
.col-toggle:hover { color: var(--blurple); }
.col-reset {
margin-top: 4px;
font-size: 11px;
color: var(--text-dim);
text-decoration: underline;
cursor: pointer;
}
.col-reset:hover { color: var(--blurple); }
.table-area { min-width: 0; }
.table-meta { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.table-wrap {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
table.table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
/* Desktop intentionally uses `table-layout: auto`. With auto layout,
setting `display: none` on every cell of a column physically removes
those cells from the box tree, and the table re-runs its width
algorithm to redistribute the freed space across remaining columns
(which all have intrinsic content widths the algorithm can use).
We tried `table-layout: fixed` here, but its column-width caching
left empty bands on the right when columns were toggled off. Mobile
still uses fixed layout — it needs the cap to prevent horizontal
overflow on phone widths. */
}
table.table th {
text-align: left;
padding: 10px 12px;
background: var(--bg-light);
color: var(--text-dim);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border);
}
/* clickable sort header — link inherits th styling, hover hints */
table.table th.sort-th { padding: 0; }
table.table th.sort-th a {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 12px;
color: inherit;
width: 100%;
height: 100%;
user-select: none;
}
table.table th.sort-th a:hover { background: var(--bg-lighter); color: var(--text); }
table.table th.sort-th .sort-arrow {
color: var(--blurple);
font-weight: 700;
font-size: 12px;
letter-spacing: 0;
}
table.table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
text-align: left;
}
table.table tr:last-child td { border-bottom: none; }
table.table tbody tr:hover { background: var(--bg-light); }
table.table td.tab-num {
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
table.table td.online-num { color: var(--green); font-weight: 500; }
table.table .row-link { color: var(--text); font-weight: 600; }
table.table .row-link:hover { color: var(--blurple); }
.row-sub { font-size: 12px; color: var(--text-dim); }
td.icon-cell { width: 36px; padding-right: 0; }
.icon-xs {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-light);
object-fit: cover;
display: block;
}
div.icon-xs.icon-fallback {
display: grid;
place-items: center;
font-size: 12px;
color: var(--text-muted);
font-weight: 700;
}
.tags {
display: flex;
gap: 4px;
flex-wrap: nowrap;
overflow: hidden;
max-width: 240px;
}
.tag {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
background: var(--bg-light);
color: var(--text-muted);
text-transform: lowercase;
letter-spacing: 0.02em;
white-space: nowrap;
flex-shrink: 0;
}
/* Lock every row to exactly 56px regardless of cell contents.
`height` on td is treated as min-height by browsers, so we also need
max-height + overflow:hidden to actually clamp tall content (trait chips,
badge icons, multiple wrapped lines). */
table.table tbody tr { height: 56px; }
table.table tbody td {
height: 56px;
max-height: 56px;
overflow: hidden;
vertical-align: middle;
line-height: 1.3;
}
.tag-nsfw { background: rgba(240, 71, 71, 0.18); color: var(--red); }
/* user public_flags → real Discord badge icons (served from Discord's CDN) */
.badges {
display: inline-flex;
gap: 3px;
flex-wrap: nowrap;
vertical-align: middle;
}
.badge-icon {
width: 18px;
height: 18px;
display: inline-block;
vertical-align: middle;
}
/* badge multi-select toggles in the filter sidebar */
.badge-toggles {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.badge-toggle {
cursor: pointer;
opacity: 0.35;
padding: 3px;
border-radius: 4px;
transition: opacity 0.12s, background 0.12s;
border: 1px solid transparent;
}
.badge-toggle:hover { opacity: 0.7; }
.badge-toggle:has(input:checked) {
opacity: 1;
background: var(--bg-lighter);
border-color: var(--blurple);
}
.badge-toggle input { display: none; }
.badge-toggle .badge-icon { width: 22px; height: 22px; }
/* primary_guild "user tag" — clickable chip, links to source server */
.user-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 6px 1px 3px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
vertical-align: middle;
}
a.user-tag:hover {
background: var(--bg-lighter);
border-color: var(--blurple);
color: var(--text);
}
.user-tag img {
width: 14px;
height: 14px;
border-radius: 2px;
}
/* user-cell: compact two-line layout in the /users table */
.user-cell { line-height: 1.3; }
.user-display { font-weight: 600; font-size: 14px; }
.user-handle-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
flex-wrap: nowrap;
overflow: hidden;
}
.user-handle { font-size: 12px; color: var(--text-dim); }
/* Compact user pill grid — used on the server detail page's "users with
tag" section. Each pill packs avatar + name + badges into one chip and
flex-wraps; many users fit per row so the section stays dense rather
than one-per-line scrolling. */
.user-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 24px;
}
.user-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 3px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 13px;
color: var(--text);
max-width: 100%;
text-decoration: none;
transition: background 0.12s, border-color 0.12s;
}
.user-pill:hover {
background: var(--bg-light);
border-color: var(--blurple);
color: inherit;
}
.user-pill .icon-xs {
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* Two-line text stack inside a pill: display name on top, @handle below.
`min-width: 0` lets the inner spans actually ellipsis-truncate inside
the flex parent (without it, flex children won't shrink past content
width). */
.user-pill-name {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
max-width: 180px;
}
.user-pill-display,
.user-pill-handle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-pill-display { font-size: 13px; }
.user-pill-handle { font-size: 11px; color: var(--text-dim); }
.user-pill .badges { gap: 2px; }
.user-pill .badge-icon { width: 14px; height: 14px; }
.profile-handle-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
flex-wrap: wrap;
}
/* server's own clan tag — sits beside the h1 name on the detail page */
.server-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 5px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text);
vertical-align: middle;
}
.server-tag:hover { border-color: var(--blurple); background: var(--bg-lighter); }
.server-tag img {
width: 18px;
height: 18px;
border-radius: 3px;
}
/* Inactive guild tag — the server reports old tag text in `profile_tag` but
* no longer carries the GUILD_TAGS feature, so the tag isn't actually usable.
* Greyed-out + line-through + a red cross, mirroring how dead invites read,
* so visitors don't mistake it for a live tag. Still clickable (a server that
* once flew a tag is a valid search hit). */
.user-tag-inactive,
.server-tag-inactive {
opacity: 0.5;
border-style: dashed;
color: var(--text-dim);
}
.user-tag-inactive:hover,
.server-tag-inactive:hover {
opacity: 0.72;
border-color: var(--border);
background: var(--bg-light);
color: var(--text-dim);
}
.user-tag-inactive span:not(.tag-x),
.server-tag-inactive span:not(.tag-x) {
text-decoration: line-through;
}
.user-tag-inactive img,
.server-tag-inactive img {
filter: grayscale(1);
opacity: 0.6;
}
.tag-x {
color: var(--red);
font-weight: 700;
text-decoration: none;
}
.server-tag-inactive .tag-x { margin-left: 1px; }
.profile-handle-row .profile-handle { color: var(--text-muted); font-size: 14px; }
.profile-handle-row .badges { gap: 4px; }
.profile-handle-row .badge-icon { width: 22px; height: 22px; }
/* server profile_traits → chips (with optional emoji) */
.trait-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 0 7px;
height: 20px;
border-radius: 4px;
background: var(--bg-light);
color: var(--text);
font-size: 11px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
}
/* infinite-scroll sentinel row */
tr.loader td { padding: 0; }
.loading-row {
text-align: center;
padding: 14px;
color: var(--text-dim);
font-size: 12px;
font-style: italic;
}
.empty-row { text-align: center; color: var(--text-dim); padding: 32px; }
.muted { color: var(--text-dim); }
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
font-size: 13px;
color: var(--text-muted);
}
.pagination a { padding: 6px 12px; border-radius: 4px; }
.pagination a:hover { background: var(--bg-light); color: var(--text); }
.directory-pagination { grid-column: 1 / -1; width: 100%; }
tr.loader .pagination { margin: 0; padding: 8px; }
.directory-pagination .pagination { margin-top: 8px; }
.pagination a:focus-visible { outline: 2px solid var(--blurple); outline-offset: 2px; }
.pg-disabled { padding: 6px 12px; color: var(--text-dim); opacity: 0.5; }
.pg-info { color: var(--text-dim); }
/* ----- feed flash animation (for SSE pushes) ----- */
.feed-item.flash {
animation: feed-flash 0.7s ease-out;
}
@keyframes feed-flash {
0% { background: rgba(114, 137, 218, 0.32); }
100% { background: var(--bg); }
}
/* ----- profile (user/server detail) ----- */
.profile {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
margin-bottom: 24px;
/* The banner image and a dark scrim are layered behind everything else
in this section. position:relative makes those absolute children
anchor here. */
position: relative;
}
/* Banner image / colour fallback now stretches to cover the *entire*
profile section — icon, name, description, AND stats all sit on top
of it. Beats the old 120px banner-strip-then-flat-card look: way more
visual impact and reuses dead space. */
.profile-banner {
position: absolute;
inset: 0;
width: 100%;
height: auto;
background: var(--bg-light);
overflow: hidden;
z-index: 0;
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-banner .banner-color { width: 100%; height: 100%; }
/* Scrim: darkens whatever banner is behind it so the white text + stats
read clearly regardless of banner brightness/contrast. The combo of
a vertical gradient (subtle at top, strong at bottom) plus a flat
tint guarantees legibility even on solid-white promotional banners
(looking at you, generic Discord game cover art) without crushing
already-dark banners to pure black. */
.profile::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.78)),
rgba(0,0,0,0.18);
z-index: 1;
pointer-events: none;
}
/* All real content sits above the scrim. */
.profile > .profile-head,
.profile > .stats {
position: relative;
z-index: 2;
}
.profile-head {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
}
.icon-lg {
width: 96px;
height: 96px;
border-radius: 50%;
border: 6px solid var(--bg);
background: var(--bg-light);
object-fit: cover;
display: block;
}
div.icon-lg.icon-fallback {
display: grid;
place-items: center;
font-size: 36px;
font-weight: 700;
color: var(--text-muted);
}
.profile-pfp-link { display: inline-block; line-height: 0; transition: filter .15s ease; }
.profile-pfp-link:hover .icon-lg { filter: brightness(1.08); }
.profile-name {
margin: 0;
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.profile-handle { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.bot-tag {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
background: var(--blurple);
color: #fff;
letter-spacing: 0.04em;
}
.profile .stats {
margin: 0;
padding: 16px 24px 20px;
/* Transparent so the banner shows through — the overlay scrim provides
enough contrast for the white stat text. */
background: transparent;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.profile .stat {
/* Slight glassy tint so each stat card is still visually grouped on
a busy banner. */
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.08);
}
/* Light text everywhere inside .profile so it reads against any banner.
text-shadow gives a soft halo so even bright spots in the banner
don't bleed into the type. */
.profile .profile-name,
.profile .profile-handle,
.profile .profile-handle-row,
.profile .profile-desc,
.profile .stat-num,
.profile .stat-label {
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.profile .profile-desc { color: rgba(255,255,255,0.92); }
.profile .profile-handle,
.profile .profile-handle-row,
.profile .stat-label { color: rgba(255,255,255,0.78); }
.profile-desc {
margin: 8px 0 0;
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
max-width: 720px;
}
.game-cards {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.game-cards .card-stats { font-size: 12px; color: var(--text-muted); }
.guild-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
margin: 8px 0 24px;
}
.guild-cards .card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
text-decoration: none;
transition: border-color 0.1s;
}
.guild-cards .card:hover { border-color: var(--blurple); }
.guild-cards .card-static { cursor: default; }
.guild-cards .card-static:hover { border-color: var(--border); }
.guild-cards .card-body { min-width: 0; flex: 1; }
.guild-cards .card-name {
font-weight: 600;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.guild-cards .card-stats {
display: flex;
gap: 6px;
align-items: center;
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.visibility-cards .visibility-card { padding-right: 8px; }
.visibility-card.is-hidden { border-style: dashed; }
.visibility-card-link { display: inline-flex; flex: none; }
.visibility-card .card-name {
display: block;
color: var(--text);
text-decoration: none;
}
.visibility-card a.card-name:hover { color: var(--blurple); }
.visibility-state { color: var(--green); font-weight: 700; }
.visibility-state.is-hidden { color: var(--text-dim); }
.visibility-toggle {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.visibility-toggle:hover,
.visibility-toggle:focus-visible {
color: var(--text);
background: var(--bg-light);
border-color: var(--border);
outline: none;
}
.visibility-toggle.is-hidden { color: var(--text-dim); }
.visibility-toggle svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* tight variant for the /me header (no overlap, smaller padding) */
.profile-head-tight { padding: 14px 18px; gap: 12px; }
.profile-head-tight .icon-lg { width: 64px; height: 64px; border-width: 4px; }
.profile-head-tight div.icon-lg.icon-fallback { font-size: 24px; }
.profile-head-tight .profile-name { font-size: 18px; }
/* ----- inline-svg charts ----- */
.chart {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px 10px;
margin: 8px 0 24px;
}
/* Plot box: positioning context for the SVG + the HTML axis-label overlays.
Height includes ~14px at the bottom for the x-axis label row, so the SVG's
data area + the visible label band exactly match across widths. */
.chart-plot {
position: relative;
height: 220px;
padding-bottom: 14px;
cursor: crosshair;
}
.chart-svg {
display: block;
width: 100%;
height: 100%;
}
.chart-grid {
stroke: var(--border);
stroke-width: 1;
stroke-dasharray: 2 4;
}
/* Axis labels are now plain HTML positioned absolutely over the SVG. The
percent coordinates set inline by the renderer line up with the same
viewBox positions the path lives in, so labels track the data even when
the SVG stretches horizontally — without inheriting the SVG's aspect-
ratio distortion the way would. */
.chart-y-label,
.chart-x-label {
position: absolute;
font-size: 10px;
color: var(--text-dim);
font-family: inherit;
line-height: 1;
pointer-events: none;
white-space: nowrap;
}
.chart-y-label {
/* `right:` set inline; vertically center on the gridline. */
transform: translateY(-50%);
text-align: right;
}
.chart-x-label {
/* `left:` set inline; horizontally center under the sample point. */
bottom: 0;
transform: translateX(-50%);
}
.chart-legend {
display: flex;
gap: 16px;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 8px;
}
.chart-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.chart-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.chart-empty {
background: var(--bg);
border: 1px dashed var(--border);
border-radius: 8px;
padding: 32px;
text-align: center;
color: var(--text-dim);
font-size: 13px;
margin: 8px 0 24px;
}
/* ----- chart hover tooltip -----
Overlay covering exactly the SVG data area (the bottom 14px is the x-label
band). Cursor line, point dots, and the tooltip box are created by
CHART_INLINE_JS and positioned with %-coords that match the SVG's viewBox,
so they stay aligned as the chart stretches. pointer-events:none so the
overlay never intercepts the mousemove the plot listens for. */
.chart-hover {
position: absolute;
inset: 0 0 14px 0;
pointer-events: none;
}
.chart-cursor {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--text-muted);
transform: translateX(-50%);
opacity: 0;
transition: opacity .1s ease;
}
.chart-pt {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 2px var(--bg); /* ring so the dot reads on top of the line */
opacity: 0;
transition: opacity .1s ease;
}
.chart-tip {
position: absolute;
top: 4px;
transform: translateX(-50%);
min-width: 96px;
background: var(--bg-darkest);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 9px;
font-size: 11px;
color: var(--text);
white-space: nowrap;
box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
opacity: 0;
transition: opacity .1s ease;
z-index: 6;
}
.chart-hover.is-on .chart-cursor { opacity: .5; }
.chart-hover.is-on .chart-pt,
.chart-hover.is-on .chart-tip { opacity: 1; }
.chart-tip-d {
color: var(--text-muted);
font-size: 10px;
margin-bottom: 5px;
}
.chart-tip-r {
display: flex;
align-items: center;
gap: 7px;
line-height: 1.6;
}
.chart-tip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: none;
}
.chart-tip-k { color: var(--text-muted); }
.chart-tip-v {
margin-left: auto;
padding-left: 16px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ----- invite code chip (server list + server detail) ----- */
.invite-chip {
display: inline-block;
padding: 5px 10px;
background: var(--bg-light);
border: 1px solid var(--border);
color: var(--text);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
font-weight: 500;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
letter-spacing: 0;
transition: border-color 0.1s, color 0.1s, background 0.1s;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.invite-chip:hover {
border-color: var(--blurple);
color: var(--blurple);
background: var(--bg-lighter);
}
/* server-detail page: Join button sits on the right edge of the header,
with the raw invite link + copy button underneath */
.join-box {
margin-left: auto;
align-self: center;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
flex-shrink: 0;
}
.join-btn { padding: 11px 22px; font-size: 16px; }
.join-btn svg { width: 20px; height: 20px; }
.join-link {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
color: var(--text-dim);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
}
.join-url { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-link .copy-btn { background: transparent; padding: 3px 5px; border-radius: 4px; }
.join-none {
margin-left: auto;
align-self: center;
flex-shrink: 0;
padding: 9px 16px;
border: 1px dashed var(--border);
border-radius: 6px;
color: var(--text-dim);
font-size: 13px;
cursor: default;
}
td.invite-cell { width: 1%; white-space: nowrap; text-align: right; padding-right: 16px; }
/* a date in a stat (smaller than a giant number) */
.stat-num.stat-date { font-size: 18px; font-weight: 600; }
/* Dual date spans — the long form (Jun 03, 2025) is shown on desktop and
the compact form (Jun '25) on phones. Swap is driven by media queries
below. */
.date-full { display: inline; }
.date-short { display: none; }
/* ----- placeholder for stub pages ----- */
.placeholder {
background: var(--bg);
border: 1px dashed var(--border);
border-radius: 8px;
padding: 60px 24px;
text-align: center;
color: var(--text-muted);
}
.placeholder h3 { color: var(--text); margin: 0 0 8px; }
.placeholder p { margin: 0; font-size: 14px; }
/* ============================================================
* Responsive — phone & small-tablet adjustments.
* ============================================================
*
* Strategy: stack the sidebar above content (already at 760px),
* collapse the topbar (hide brand-sub + login text + user-pill name),
* let tables scroll horizontally inside .table-wrap, and shrink
* profile / stats / chart paddings so nothing clips off the screen.
*/
@media (max-width: 760px) {
/* layout shell */
main { padding: 14px; }
.topbar-inner { padding: 8px 14px; gap: 10px; flex-wrap: wrap; }
.brand-sub { display: none; }
.brand-name { font-size: 16px; }
.brand-logo { width: 30px; height: 30px; }
.nav {
order: 3;
flex-basis: 100%;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
gap: 0;
}
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 6px 10px; font-size: 13px; }
.login-btn { padding: 6px 10px; font-size: 13px; gap: 6px; }
.login-btn svg { width: 16px; height: 16px; }
.user-pill-name { display: none; }
.logout-btn { font-size: 12px; }
/* table view: sidebar on top, full width, not sticky */
.layout { gap: 12px; }
.sidebar {
position: static;
padding: 12px;
max-height: none;
overflow: visible;
}
.filter-form { gap: 10px; }
.filter-actions { position: static; margin: 0 -12px; padding: 10px 12px 0; }
/* ── Data tables on phones ────────────────────────────────────────
* Two treatments:
* 1. Default — secondary tables (invite logs, game-detail server
* lists, profile bookings) just scroll horizontally. Readable,
* no cramming.
* 2. Cards — the three primary browse tables (servers, users/bots,
* games) live in `.table-area` and carry the column-toggle
* `data-col` cells. Those become stacked cards: icon + name on
* top, a labelled stats line below.
* The column-toggle JS hides a column by setting inline `display:none`
* on its `td[data-col]`. Nothing here forces `display` with
* !important, so toggled-off columns stay hidden inside the cards too. */
/* swap to compact dates inside table cells (e.g. "Jun '25") */
.date-full { display: none; }
.date-short { display: inline; }
/* 1. default: let any wide table scroll instead of crushing it */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { font-size: 12px; }
table.table th { font-size: 10px; }
/* 2. card layout — primary browse tables only */
.table-area .table-wrap {
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
}
.table-area table.table { display: block; }
.table-area table.table colgroup,
.table-area table.table thead { display: none; }
.table-area table.table tbody { display: flex; flex-direction: column; gap: 8px; }
.table-area table.table tbody tr {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px 16px;
position: relative;
height: auto;
max-height: none;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
}
.table-area table.table tbody tr:hover { background: var(--bg-light); }
/* un-clamp the desktop 56px row/cell lock + drop cell borders/padding */
.table-area table.table tbody td {
height: auto;
max-height: none;
overflow: visible;
border: 0;
padding: 0;
white-space: normal;
}
/* icon: absolute, top-left of the card */
.table-area table.table td.icon-cell {
position: absolute;
top: 12px;
left: 14px;
width: 44px;
padding: 0;
}
.table-area .icon-xs { width: 44px; height: 44px; }
.table-area div.icon-xs.icon-fallback { font-size: 16px; }
/* name: full-width first line, indented to clear the icon */
.table-area table.table tbody td:not(.icon-cell):not([data-col]):not([colspan]) {
flex: 1 1 100%;
min-height: 44px;
padding-left: 56px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 6px;
font-size: 15px;
line-height: 1.25;
}
.table-area table.table .row-link { font-size: 15px; }
.table-area .row-sub { display: inline; } /* vanity hint — room to show it */
/* stats: labelled inline cells that wrap onto lines under the name */
.table-area table.table tbody td[data-col] {
flex: 0 0 auto;
font-size: 12.5px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.table-area table.table tbody td[data-col]::before {
display: block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
margin-bottom: 2px;
}
.table-area table.table tbody td[data-col="members"]::before { content: "Members"; }
.table-area table.table tbody td[data-col="growth"]::before { content: "This week"; }
.table-area table.table tbody td[data-col="growth"]:empty { display: none; }
.table-area table.table tbody td[data-col="language"]::before { content: "Language"; }
.table-area table.table tbody td[data-col="online"]::before { content: "Online"; }
.table-area table.table tbody td[data-col="created"]::before { content: "Created"; }
.table-area table.table tbody td[data-col="boosts"]::before { content: "Boosts"; }
.table-area table.table tbody td[data-col="tag_users"]::before { content: "Tag users"; }
.table-area table.table tbody td[data-col="added"]::before { content: "Added"; }
.table-area table.table tbody td[data-col="checked"]::before { content: "Checked"; }
.table-area table.table tbody td[data-col="invites"]::before { content: "Invites"; }
.table-area table.table tbody td[data-col="servers"]::before { content: "Servers"; }
.table-area table.table tbody td[data-col="appid"]::before { content: "App ID"; }
.table-area table.table tbody td[data-col="score"]::before { content: "Activity"; }
.table-area table.table tbody td.online-num { color: var(--green); font-weight: 600; }
/* traits + invite: full-width lines, no label, all chips shown.
`render_traits` nests a `div.tags` inside the `td.tags` cell, so the
INNER div is the real chip container — it must wrap too, else its base
rule (nowrap + overflow:hidden + max-width:240px) clips the last chip. */
.table-area table.table tbody td.tags[data-col="traits"],
.table-area table.table tbody td.invite-cell[data-col="invite"] { flex: 1 1 100%; }
.table-area table.table td.tags,
.table-area table.table td.tags .tags {
max-width: 100%;
overflow: visible;
flex-wrap: wrap;
gap: 4px;
}
/* cards have room: show full trait labels (drop the desktop 110px /
ellipsis cap) and let chips wrap onto extra lines instead of clipping */
.table-area table.table td.tags .trait-chip {
max-width: none;
overflow: visible;
text-overflow: clip;
}
.invite-chip { font-size: 11px; }
/* loader + "no matches" rows: plain, not cards */
.table-area table.table tbody tr.loader,
.table-area table.table tbody tr:has(.empty-row) {
display: block;
padding: 8px 2px;
background: transparent;
border: 0;
}
.table-area table.table tbody tr.loader td,
.table-area table.table tbody tr:has(.empty-row) td { padding: 0; }
/* stats strip: condensed grid */
.stats { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.stat { padding: 10px 12px; }
.stat-num { font-size: 22px; }
.stat-num.stat-date { font-size: 15px; }
/* profile (server / user / game detail) */
.profile-banner { height: 90px; }
.profile-head {
flex-wrap: wrap;
padding: 12px;
gap: 10px;
align-items: flex-start;
}
.profile-head .icon-lg { width: 64px; height: 64px; border-width: 4px; }
.profile-head div.icon-lg.icon-fallback { font-size: 22px; }
.profile-name { font-size: 18px; flex-wrap: wrap; }
.profile-handle-row { gap: 6px; }
.profile-head .join-box,
.profile-head .join-none {
margin-left: 0;
align-self: stretch;
flex-basis: 100%;
}
.profile-head .join-none { text-align: center; }
/* charts: shorter on phones so the legend + title fit one screen */
.chart { padding: 10px 10px 6px; }
.chart-plot { height: 180px; }
/* card grids on /me + game-cards on server detail */
.game-cards, .guild-cards { grid-template-columns: 1fr; gap: 8px; }
/* feed entries: compact spacing */
.feed-h { font-size: 14px; }
/* page heading */
.page-h { font-size: 18px; }
}
@media (max-width: 420px) {
/* tighter still on small phones */
main { padding: 10px; }
.topbar-inner { padding: 6px 10px; }
.stats { grid-template-columns: 1fr 1fr; }
.stat-num { font-size: 18px; }
.stat-num.stat-date { font-size: 13px; }
.profile-banner { height: 70px; }
.chart-plot { height: 160px; }
}
/* ============================================================
* Submit-invite form (header)
* ============================================================ */
.submit-invite {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.submit-invite input {
background: var(--bg-light);
border: 1px solid var(--border);
color: var(--text);
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
width: 220px;
outline: none;
transition: border-color 0.12s, background 0.12s;
}
.submit-invite input:focus {
border-color: var(--blurple);
background: var(--bg-lighter);
}
.submit-invite input::placeholder { color: var(--text-dim); }
.submit-invite button {
background: var(--blurple);
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s;
}
.submit-invite button:hover { background: var(--blurple-hover); }
@media (max-width: 760px) {
.submit-invite { order: 4; flex-basis: 100%; }
.submit-invite input { flex: 1; width: auto; }
}
/* ============================================================
* PFP grid + detail
* ============================================================ */
.pfp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
margin: 16px 0;
}
.pfp-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
transition: background 0.12s, border-color 0.12s;
}
.pfp-card:hover {
background: var(--bg-light);
border-color: var(--blurple);
color: inherit;
}
.pfp-thumb {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
background: var(--bg-light);
}
.pfp-card-meta { text-align: center; }
.pfp-card-count {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.pfp-card-hash {
font-size: 11px;
color: var(--text-dim);
font-family: ui-monospace, SFMono-Regular, monospace;
margin-top: 2px;
}
.pfp-loader {
grid-column: 1 / -1;
text-align: center;
padding: 16px;
color: var(--text-dim);
font-size: 13px;
}
/* ============================================================
* History section (server / user detail)
* ============================================================ */
.history-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0 24px;
}
.history-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
}
.history-field {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
min-width: 64px;
flex-shrink: 0;
}
.history-pair {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.history-pair .feed-old,
.history-pair .feed-new {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.history-avatar-link { display: inline-flex; flex-shrink: 0; border-radius: 6px; }
.history-avatar-link:focus-visible { outline: 2px solid var(--blurple); outline-offset: 3px; }
.history-img {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
background: var(--bg-light);
}
.history-img-empty {
width: 40px;
height: 40px;
border-radius: 6px;
background: var(--bg-light);
border: 1px dashed var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 11px;
flex-shrink: 0;
}
.history-time {
font-size: 11px;
color: var(--text-dim);
flex-shrink: 0;
}
/* ============================================================
* Feed image-delta pair (icon/avatar/banner/splash changes)
* ============================================================ */
.feed-img-pair {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.feed-delta-img {
width: 32px;
height: 32px;
border-radius: 6px;
object-fit: cover;
background: var(--bg-light);
}
.feed-delta-img-empty {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--bg-light);
border: 1px dashed var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 10px;
}
/* ============================================================
* Dead invites (greyed out)
* ============================================================ */
.row-dead { opacity: 0.45; }
.row-dead:hover { opacity: 0.65; }
/* /servers rows for servers with no working invite: still listed, but
visibly "disabled" */
.row-nojoin { opacity: 0.45; filter: grayscale(1); }
.row-nojoin:hover { opacity: 0.7; }
.server-card-nojoin { opacity: 0.45; filter: grayscale(1); }
.server-card-nojoin:hover { opacity: 0.7; }
.invite-code-dead {
text-decoration: line-through;
color: var(--text-dim);
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 13px;
}
.tag-alive {
background: rgba(87, 242, 135, 0.15);
color: var(--green, #57f287);
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.tag-dead {
background: rgba(237, 66, 69, 0.15);
color: var(--red, #ed4245);
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
/* ============================================================
* Bot detail card (RPC metadata + Add Bot CTA)
* ============================================================ */
.bot-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 20px;
margin: 16px 0 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.bot-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.bot-card-badges {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
.tag-verified {
background: rgba(87, 173, 245, 0.15);
color: #57adf5;
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
.tag-discoverable {
background: rgba(87, 242, 135, 0.15);
color: var(--green, #57f287);
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.tag-monetized {
background: rgba(254, 231, 92, 0.18);
color: #f9c74f;
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.tag-private {
background: var(--bg-light);
color: var(--text-dim);
padding: 3px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
}
.add-bot-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--blurple);
color: #fff !important;
font-weight: 700;
font-size: 14px;
padding: 9px 18px;
border-radius: 6px;
transition: background 0.12s;
}
.add-bot-btn:hover { background: var(--blurple-hover); }
.bot-description {
margin: 0;
color: var(--text);
white-space: pre-wrap;
line-height: 1.5;
font-size: 14px;
}
.bot-description.muted { color: var(--text-dim); font-style: italic; }
.bot-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bot-tag-chip {
background: var(--bg-light);
color: var(--text-muted);
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
}
.bot-card-links {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
}
.bot-link {
color: var(--text-dim);
text-decoration: underline;
}
.bot-link:hover { color: var(--text); }
/* ============================================================
* SEO surfaces — breadcrumbs, home hero, topic hub, FAQ
* ============================================================ */
/* ----- breadcrumbs ----- */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--text-dim);
margin: 0 0 16px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--blurple); }
.breadcrumb-sep { color: var(--text-dim); }
.breadcrumb-cur { color: var(--text); }
/* ----- homepage hero ----- */
.home-page { display: grid; gap: 28px; }
.home-page > .stats,
.home-page > .home-hero { margin: 0; }
.home-games > .section-h { margin: 0 0 16px; }
.home-discovery {
display: grid;
gap: 16px;
padding: 20px 0;
border-block: 1px solid var(--border);
}
.home-discovery h2 {
margin: 0;
color: var(--text);
font-size: 16px;
font-weight: 600;
}
.home-discovery-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.home-discovery-links a {
padding: 2px 0;
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
text-underline-offset: 4px;
}
.home-discovery-links a:hover { color: var(--blurple); text-decoration: underline; }
.home-discovery-links a:focus-visible { outline: 2px solid var(--blurple); outline-offset: 4px; border-radius: 2px; }
.home-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; margin-top: 16px; }
.home-search input {
flex: 1 1 240px;
min-width: 0;
padding: 12px 14px;
color: var(--text);
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 6px;
font: inherit;
}
.home-search button {
padding: 12px 18px;
border: 0;
border-radius: 6px;
color: #fff;
background: var(--blurple);
font: inherit;
cursor: pointer;
}
.home-search button:hover { background: var(--blurple-hover); }
.home-search :is(input, button):focus-visible { outline: 2px solid var(--blurple); outline-offset: 3px; }
/* The box typing goes to (see TYPE_TO_SEARCH_JS): show it ready. */
main input.type-target { border-color: var(--blurple); }
.home-hero h1 {
font-size: 26px;
font-weight: 700;
margin: 0 0 6px;
letter-spacing: -0.02em;
}
.home-hero p {
margin: 0;
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
max-width: 72ch;
}
@media (max-width: 600px) {
.home-page { gap: 24px; }
.home-page > .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-page > .stats .stat { padding: 12px 8px; }
.home-page > .stats .stat-num { font-size: clamp(13px, 3.8vw, 20px); letter-spacing: -.03em; }
.home-page > .stats .stat-label { font-size: 9px; letter-spacing: 0; line-height: 1.4; }
.home-discovery { padding: 18px 0; gap: 18px; }
.home-discovery-links { gap: 8px 18px; }
.home-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.home-search input { width: 100%; box-sizing: border-box; padding: 10px; font-size: 14px; }
.home-search button { padding: 10px 12px; font-size: 14px; }
}
/* ----- section heading (homepage hub, "more communities") ----- */
.section-h {
font-size: 16px;
font-weight: 700;
margin: 26px 0 12px;
letter-spacing: -0.01em;
}
/* ----- topic chip grid (homepage hub + related topics) ----- */
.topic-chip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 8px;
}
.topic-chip {
display: flex;
align-items: center;
gap: 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
color: var(--text);
min-width: 0;
transition: border-color .12s, background .12s;
}
.topic-chip:hover {
border-color: var(--blurple);
background: var(--bg-light);
color: inherit;
}
.topic-chip-icon {
width: 32px;
height: 32px;
border-radius: 8px;
flex: none;
object-fit: cover;
}
.topic-chip-fallback {
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-lighter);
color: var(--text-muted);
font-weight: 700;
font-size: 14px;
}
.topic-chip-body { min-width: 0; }
.topic-chip-name {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topic-chip-sub {
font-size: 11px;
color: var(--text-dim);
}
/* ----- FAQ block (topic pages) ----- */
.faq { margin: 30px 0 8px; }
.faq-item {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg);
padding: 14px 16px;
margin-bottom: 8px;
}
.faq-item h3 {
margin: 0 0 6px;
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.faq-item p {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--text-muted);
}
@media (max-width: 760px) {
.topic-chip-grid { grid-template-columns: 1fr 1fr; }
.home-hero h1 { font-size: 22px; }
}
/* ============================================================
* Ads + credits
* ============================================================ */
/* --- search-page header: heading/intro on the left, ad slot on the right --- */
.table-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.table-head-text { min-width: 0; flex: 1 1 360px; }
/* the intro already caps at 68ch, so the ad gets the leftover blank space */
.table-head .topic-intro { margin-bottom: 14px; }
/* --- the banner ad slot --- */
.ad-slot {
position: relative;
flex: 0 0 320px;
max-width: 340px;
min-height: 96px;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: flex-end;
border: 1px solid var(--border);
background: var(--bg);
isolation: isolate;
transition: border-color 0.12s, transform 0.12s;
}
.ad-slot:hover { border-color: var(--blurple); color: inherit; transform: translateY(-1px); }
@media (max-width: 760px) {
.ad-slot { flex-basis: 100%; max-width: 100%; }
}
.ad-slot-bg {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
}
.ad-slot-bg-blur { filter: blur(18px); transform: scale(1.3); opacity: 0.8; }
.ad-slot-bg-flat { background: linear-gradient(135deg, var(--bg-light), var(--bg-lighter)); }
.ad-slot-bg-house {
background: radial-gradient(120% 120% at 0% 0%, rgba(114,137,218,0.30), transparent 60%),
linear-gradient(135deg, var(--bg-light), var(--bg-dark));
}
/* dark scrim so the name/cta stay legible over any banner */
.ad-slot::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.10) 100%);
}
.ad-slot-body {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
width: 100%;
}
.ad-slot-icon {
width: 40px;
height: 40px;
border-radius: 10px;
flex-shrink: 0;
object-fit: cover;
background: var(--bg-light);
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.ad-slot-icon-fallback {
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
font-size: 18px;
background: var(--blurple);
}
.ad-slot-house-mark {
width: 40px;
height: 40px;
border-radius: 10px;
flex-shrink: 0;
display: grid;
place-items: center;
font-size: 26px;
font-weight: 600;
line-height: 1;
color: #fff;
background: rgba(114,137,218,0.85);
}
.ad-slot-text { min-width: 0; }
.ad-slot-name {
font-weight: 700;
font-size: 15px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.ad-slot-cta {
font-size: 12px;
color: rgba(255,255,255,0.82);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ad-slot-tag {
position: absolute;
top: 8px;
right: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.92);
background: rgba(0,0,0,0.55);
padding: 2px 6px;
border-radius: 4px;
backdrop-filter: blur(2px);
}
/* --- generic buttons (introduced for ads/credits, reusable) --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-light);
color: var(--text);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.btn:hover { background: var(--bg-lighter); color: var(--text); transform: translateY(-1px); }
.btn-blurple { background: var(--blurple); border-color: var(--blurple); color: #fff; }
.btn-blurple:hover { background: var(--blurple-hover); color: #fff; }
.btn-block { width: 100%; }
/* --- advertise + credits pages --- */
.adv { max-width: 1100px; }
.adv-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.adv-head .topic-intro { margin-top: 6px; }
.adv-balance {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 18px;
}
.adv-balance-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-dim);
font-weight: 700;
}
.adv-balance-amt { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.adv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
@media (max-width: 860px) { .adv-grid { grid-template-columns: 1fr; } }
/* override the row-flex .card for these column-layout panels */
.card.adv-card {
display: block;
padding: 18px;
}
.card.adv-card:hover { background: var(--bg); border-color: var(--border); transform: none; }
.adv-card-h {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
}
.adv-form { display: flex; flex-direction: column; gap: 14px; }
.adv-form .field { display: flex; flex-direction: column; gap: 6px; }
.adv-form label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.adv-form input[type=text],
.adv-form input[type=number],
.adv-form select {
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
color: var(--text);
font-size: 14px;
width: 100%;
}
.adv-form input:focus, .adv-form select:focus {
outline: none;
border-color: var(--blurple);
}
.quick-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--bg-light);
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chip-btn:hover { background: var(--bg-lighter); color: var(--text); border-color: var(--blurple); }
.adv-projection {
font-size: 13px;
color: var(--text-dim);
background: var(--bg-darkest);
border: 1px dashed var(--border);
border-radius: 8px;
padding: 10px 12px;
line-height: 1.5;
}
.adv-projection.on { color: var(--text); border-style: solid; border-color: var(--blurple); }
.adv-tos {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.adv-tos input { margin-top: 2px; }
.adv-how { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.adv-how li { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.adv-how b { color: var(--text); }
.adv-floor { font-size: 12px; margin: 14px 0 0; line-height: 1.5; }
/* ---- current competition panel ---- */
.adv-comp {
margin: 0 0 22px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 8px;
padding: 18px 20px;
}
.adv-comp-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.adv-comp-h { margin: 0; font-size: 16px; font-weight: 700; }
.adv-comp-count {
font-size: 12px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.adv-comp-sub { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 8px 0 16px; }
.adv-comp-sub b { color: var(--text); }
/* stacked flow over time — x = time, height = summed $/day rate of overlaps */
.comp-flow-wrap { margin-top: 2px; }
.comp-flow {
display: flex;
align-items: flex-end;
width: 100%;
height: 168px;
background: var(--bg-darkest);
border-radius: 6px;
overflow: hidden;
}
.comp-flow-col {
height: 100%;
display: flex;
flex-direction: column-reverse;
border-right: 1px solid rgba(0,0,0,0.18);
}
.comp-flow-col:last-child { border-right: 0; }
.comp-flow-band { width: 100%; flex: none; min-height: 1px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.12); }
.comp-flow-band-house {
background: repeating-linear-gradient(45deg,
var(--bg-lighter), var(--bg-lighter) 6px, var(--bg-light) 6px, var(--bg-light) 12px);
}
.comp-flow-axis { position: relative; height: 18px; margin-top: 6px; }
.comp-flow-tick {
position: absolute;
top: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.comp-flow-tick::before { content: ""; width: 1px; height: 4px; background: var(--border); }
.comp-flow-tick-label { font-size: 11px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; }
.comp-flow-tick:first-child { transform: translateX(0); align-items: flex-start; }
/* the legend / per-advertiser breakdown */
.comp-list { margin-top: 14px; display: flex; flex-direction: column; gap: 1px; }
.comp-row {
display: grid;
grid-template-columns: 12px 1fr auto;
grid-template-areas: "dot name share" "dot meta meta";
column-gap: 11px;
align-items: center;
padding: 8px;
border-radius: 6px;
}
.comp-row:hover { background: var(--bg); }
.comp-dot { grid-area: dot; width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.comp-dot-house {
border: 1px solid var(--border);
background: repeating-linear-gradient(45deg,
var(--bg-lighter), var(--bg-lighter) 3px, var(--bg-light) 3px, var(--bg-light) 6px);
}
.comp-name {
grid-area: name;
min-width: 0;
font-size: 14px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.comp-name-sub {
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
margin-left: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.comp-share {
grid-area: share;
font-size: 15px;
font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
text-align: right;
}
.comp-meta { grid-area: meta; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.comp-row-house .comp-share { color: var(--text-muted); }
.comp-share-sched { color: var(--yellow) !important; font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.comp-empty { font-size: 13px; color: var(--text-muted); margin: 14px 0 0; line-height: 1.55; }
.badge-live {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
background: rgba(67,181,129,0.18);
color: var(--green);
}
/* --- credit strip on /me --- */
.credits-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 18px;
margin: 18px 0 8px;
}
.credits-strip-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-dim);
font-weight: 700;
}
.credits-strip-bal { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.credits-strip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* --- ledger list --- */
.ledger { display: flex; flex-direction: column; }
.ledger-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-reason { font-weight: 600; font-size: 14px; }
.ledger-memo { font-size: 12px; color: var(--text-muted); }
.ledger-time { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ledger-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-amt.pos { color: var(--green); }
.ledger-amt.neg { color: var(--text-muted); }
/* --- rail status list --- */
.rails-status { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.rail-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
}
.rail-name { color: var(--text-muted); }
.rail-on { color: var(--green); font-weight: 600; font-size: 12px; }
.rail-off { color: var(--text-dim); font-size: 12px; }
/* --- flash messages --- */
.flash {
border-radius: 8px;
padding: 12px 14px;
font-size: 14px;
margin-bottom: 16px;
line-height: 1.5;
}
.flash-ok { background: rgba(67,181,129,0.14); border: 1px solid rgba(67,181,129,0.4); color: var(--green); }
.flash-err { background: rgba(240,71,71,0.12); border: 1px solid rgba(240,71,71,0.4); color: #f5a3a3; }
/* --- payment page --- */
.pay { max-width: 560px; }
.pay-card { margin-top: 12px; }
.pay-amount { font-size: 15px; margin-bottom: 6px; }
.pay-amount-num { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.pay-amount-asset { color: var(--text-muted); }
.pay-bonus { color: var(--green); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.pay-addr {
background: var(--bg-darkest);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
word-break: break-all;
}
.pay-addr code { font-size: 13px; color: var(--text); }
.pay-quote {
background: var(--bg-darkest);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
font-size: 14px;
color: var(--text-muted);
margin-bottom: 14px;
line-height: 1.5;
}
.pay-quote b { color: var(--text); }
/* --- deposit (per-account address) cards on /credits --- */
.credits-howto { max-width: 760px; }
.deposit-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.card.deposit-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 16px;
text-align: center;
}
.card.deposit-card:hover { background: var(--bg); border-color: var(--border); transform: none; }
.deposit-head { width: 100%; }
.deposit-rail { display: block; font-weight: 700; font-size: 15px; }
.deposit-assets { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.deposit-qr {
background: #fff;
padding: 8px;
border-radius: 8px;
line-height: 0;
width: 166px;
height: 166px;
}
.deposit-qr svg { width: 150px; height: 150px; display: block; }
.deposit-addr {
width: 100%;
background: var(--bg-darkest);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
}
.deposit-addr code { font-size: 11px; color: var(--text); word-break: break-all; }
.deposit-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.deposit-explorer { color: var(--blurple); font-weight: 600; }
.deposit-explorer:hover { text-decoration: underline; }
/* --- invite chip + clipboard copy button: ONE integrated pill of a fixed
* width. The code fills the left (ellipsis / blank space as needed); the copy
* button is a divider segment pinned on the right. Because every pill is the
* same width, the copy icons line up at the same x down the column. --- */
.invite-wrap {
display: inline-flex;
align-items: stretch;
width: 150px;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: var(--bg-light);
vertical-align: middle;
}
.invite-wrap:hover { border-color: var(--blurple); }
.invite-wrap .invite-chip {
flex: 1 1 auto;
min-width: 0;
max-width: none;
border: none;
border-radius: 0;
background: transparent;
}
.invite-wrap .invite-chip:hover { background: transparent; color: var(--blurple); }
.copy-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 7px;
border: none;
border-left: 1px solid var(--border);
background: transparent;
color: var(--text-dim);
cursor: pointer;
line-height: 0;
transition: color 0.12s, background 0.12s;
}
.copy-btn:hover { color: var(--text); background: var(--bg-lighter); }
.copy-btn.copied { color: var(--green); }
/* ============================================================
Accounts: profile handle, contributions, linking, leaderboard
============================================================ */
.btn-sm { padding: 5px 11px; font-size: 13px; }
/* the .handle.discriminator under the avatar, plus the @username next to it */
.profile-handle-row .profile-handle { color: var(--text); font-weight: 700; font-size: 15px; }
.profile-handle-at { color: var(--text-dim); font-size: 13px; }
/* contribution stat tiles (submitted count + rank) */
.profile-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.profile-stat {
display: block;
padding: 12px 18px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 10px;
text-decoration: none;
transition: border-color 0.12s, transform 0.12s;
}
.profile-stat:hover { border-color: var(--blurple); transform: translateY(-1px); }
.profile-stat-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }
.profile-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* the "your disdex account" box: handle + linked Discords + link button */
.account-box {
margin: 20px 0;
padding: 16px 18px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 12px;
}
.account-box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-box-head .feed-h { margin: 0; }
.account-box-sub { color: var(--text-muted); font-size: 13px; margin: 8px 0 12px; line-height: 1.5; }
.account-box-sub a { color: var(--blurple); }
.handle-edit { margin-bottom: 12px; }
.handle-edit > summary {
cursor: pointer; color: var(--text-muted); font-size: 13px; width: max-content;
list-style: none;
}
.handle-edit > summary::-webkit-details-marker { display: none; }
.handle-edit > summary:hover { color: var(--text); }
.handle-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.handle-form input {
padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border);
background: var(--bg-darkest); color: var(--text); font-size: 14px; min-width: 180px;
}
.handle-form-hint { color: var(--text-dim); font-size: 12px; }
.handle-form-hint code { background: var(--bg-darkest); padding: 1px 5px; border-radius: 4px; }
.linked-list { display: flex; flex-direction: column; gap: 8px; }
.linked-row { display: flex; align-items: center; gap: 10px; }
.linked-meta { display: flex; flex-direction: column; line-height: 1.2; }
.linked-name { color: var(--text); font-weight: 600; font-size: 14px; }
.linked-handle { color: var(--text-dim); font-size: 12px; }
.linked-row .tag { margin-left: auto; }
/* leaderboard */
.leaderboard { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.lb-row {
display: flex; align-items: center; gap: 12px;
padding: 8px 12px; border-radius: 8px;
background: var(--bg-light); border: 1px solid transparent;
}
.lb-row-me { border-color: var(--blurple); background: rgba(114,137,218,0.10); }
.lb-rank { width: 42px; font-weight: 800; color: var(--text-dim); font-size: 15px; text-align: right; }
.lb-meta { flex: 1; min-width: 0; }
.lb-name { color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; }
a.lb-name:hover { color: var(--blurple); }
.lb-count { font-weight: 800; color: var(--text); font-size: 15px; white-space: nowrap; }
.lb-count-label { color: var(--text-dim); font-weight: 500; font-size: 12px; }
.lb-rank::before { content: "#"; color: var(--text-dim); }
.lb-sub { color: var(--text-dim); font-size: 12px; margin-top: 1px; }
/* period / sort controls */
.lb-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.lb-group {
display: flex; align-items: center; gap: 4px;
background: var(--bg-darkest); border: 1px solid var(--border);
border-radius: 9px; padding: 3px 4px;
}
.lb-group-label {
color: var(--text-dim); font-size: 11px; text-transform: uppercase;
letter-spacing: 0.04em; padding: 0 6px 0 4px;
}
.lb-pill {
padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
color: var(--text-muted); text-decoration: none; white-space: nowrap;
transition: background 0.12s, color 0.12s;
}
.lb-pill:hover { color: var(--text); background: var(--bg-light); }
.lb-pill-active, .lb-pill-active:hover { background: var(--blurple); color: #fff; }
/* podium (top 3) */
.lb-podium {
display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap;
gap: 14px; margin: 30px auto 24px; max-width: 640px;
}
.lb-pod {
flex: 1 1 0; min-width: 140px; max-width: 200px;
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 18px 12px 16px; border-radius: 16px; text-align: center;
background: var(--bg-light); border: 1.5px solid var(--border);
text-decoration: none; transition: transform 0.12s, box-shadow 0.12s;
}
.lb-pod:hover { transform: translateY(-2px); }
.lb-pod .icon-lg, .lb-pod .icon-fallback {
width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
}
.lb-pod-medal { font-size: 26px; line-height: 1; }
.lb-pod-name { color: var(--text); font-weight: 700; font-size: 15px; word-break: break-word; }
.lb-pod-num { font-weight: 800; font-size: 22px; color: var(--text); }
.lb-pod-num-lbl { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.lb-pod-sub { color: var(--text-dim); font-size: 12px; }
.lb-pod-me { outline: 2px solid var(--blurple); outline-offset: 2px; }
/* medals: gold / silver / bronze (1st is centered + elevated via DOM order) */
.lb-pod-1 {
transform: translateY(-14px); border-color: #f1c40f;
box-shadow: 0 0 0 1px #f1c40f, 0 10px 30px rgba(241, 196, 15, 0.16);
}
.lb-pod-1:hover { transform: translateY(-16px); }
.lb-pod-1 .icon-lg, .lb-pod-1 .icon-fallback { width: 74px; height: 74px; }
.lb-pod-1 .lb-pod-medal { font-size: 30px; }
.lb-pod-1 .lb-pod-num { color: #f1c40f; }
.lb-pod-2 { border-color: #aeb9c4; box-shadow: 0 0 0 1px rgba(174, 185, 196, 0.45); }
.lb-pod-2 .lb-pod-num { color: #cdd6df; }
.lb-pod-3 { border-color: #cd7f32; box-shadow: 0 0 0 1px rgba(205, 127, 50, 0.45); }
.lb-pod-3 .lb-pod-num { color: #e0985a; }
/* ============================================================
Public API docs (/api)
============================================================ */
.api-docs { max-width: 860px; margin: 0 auto; }
.api-hero { padding: 8px 0 4px; }
.api-hero h1 { margin: 0 0 6px; font-size: 30px; color: var(--text); }
.api-hero .lead { color: var(--text-muted); font-size: 16px; margin: 0; max-width: 640px; }
.api-section { margin-top: 30px; }
.api-section > h2 {
font-size: 18px; color: var(--text); margin: 0 0 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.api-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.api-list li { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.api-list strong { color: var(--text); }
.api-docs code {
background: var(--bg-darkest); color: var(--text);
padding: 1px 5px; border-radius: 4px; font-size: 12.5px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.api-code, .api-token {
background: var(--bg-darkest); border: 1px solid var(--border);
border-radius: 8px; padding: 12px 14px; margin: 8px 0 0;
overflow-x: auto; font-size: 12.5px; line-height: 1.5;
}
.api-code code, .api-token code { background: none; padding: 0; color: var(--text); white-space: pre; }
.api-token code { white-space: pre-wrap; word-break: break-all; color: var(--green); font-weight: 600; }
.api-ep {
background: var(--bg-dark); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.ep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-method {
font-weight: 800; font-size: 11px; letter-spacing: 0.04em;
padding: 3px 8px; border-radius: 5px; color: #fff;
}
.ep-get { background: var(--green); }
.ep-post { background: var(--yellow); color: #1e2124; }
.ep-path { font-size: 14px; color: var(--text); font-weight: 600; }
.ep-desc { color: var(--text-muted); font-size: 13.5px; margin: 8px 0 0; line-height: 1.5; }
.btn-danger {
background: transparent; color: var(--red); border: 1px solid var(--border);
padding: 5px 11px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.api-keys { margin-top: 18px; }
.api-keys h3 { color: var(--text); font-size: 15px; margin: 0 0 10px; }
.api-keys-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.api-keys-table th {
text-align: left; color: var(--text-dim); font-weight: 600;
padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.api-keys-table td { padding: 8px 10px; border-bottom: 1px solid var(--bg-light); color: var(--text-muted); }
.api-key-new { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.api-key-new input {
flex: 1; min-width: 200px; background: var(--bg-darkest); border: 1px solid var(--border);
border-radius: 6px; padding: 8px 11px; color: var(--text); font-size: 14px;
}
.api-key-new input:focus { border-color: var(--blurple); outline: none; }
/* Profile "servers added" infinite-scroll loader (spans the whole card grid) */
.cards-loader {
grid-column: 1 / -1;
text-align: center;
padding: 20px;
color: var(--text-dim);
font-size: 14px;
}
/* ----- PFP image search: scoped upload and optional crop editor ----- */
.pfp-search-form {
max-width: 640px;
margin: 16px 0;
padding: 18px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
}
#pfp-search-form.pfp-dragover {
border-color: var(--blurple);
outline: 2px dashed var(--blurple);
outline-offset: 3px;
background: var(--bg-light);
}
#pfp-search-form #pfp-file {
display: block;
max-width: 100%;
margin: 10px 0;
color: var(--text-muted);
font: inherit;
}
#pfp-search-form button,
#pfp-search-form #pfp-file::file-selector-button {
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-light);
color: var(--text);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
#pfp-search-form #pfp-file::file-selector-button { margin-right: 10px; }
#pfp-search-form button:hover,
#pfp-search-form #pfp-file::file-selector-button:hover { background: var(--bg-lighter); }
#pfp-search-form button[type="submit"],
#pfp-search-form button:not([type]) {
background: var(--blurple);
border-color: var(--blurple);
color: #fff;
}
#pfp-search-form button[type="submit"]:hover,
#pfp-search-form button:not([type]):hover { background: var(--blurple-hover); }
#pfp-search-form :is(button, input, canvas):focus-visible {
outline: 2px solid var(--blurple);
outline-offset: 4px;
}
#pfp-search-form button:disabled { opacity: 0.6; cursor: default; }
#pfp-search-form #pfp-crop {
display: block;
max-width: min(100%, 480px);
height: auto;
margin: 16px 0;
/* No border/padding: pointer coordinates map directly to image pixels. */
padding: 0;
border: 0;
border-radius: 0;
box-shadow: 0 0 0 1px var(--border);
background: var(--bg-darkest);
cursor: crosshair;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
#pfp-search-form #pfp-crop[hidden],
#pfp-search-form #pfp-reset[hidden] { display: none; }
#pfp-search-form #pfp-reset { margin: 0; }
#pfp-search-form #pfp-selection {
margin: 12px 0;
color: var(--text-muted);
font-size: 13px;
line-height: 1.6;
overflow-wrap: anywhere;
}
#pfp-search-form #pfp-selection.pfp-error { color: #ffb4b4; }
.pfp-search-form h2 { margin: 0 0 8px; font-size: 18px; }
.pfp-search-form > p { color: var(--text-muted); line-height: 1.6; }
.pfp-search-form > label { display: block; font-size: 14px; font-weight: 600; }
.pfp-search-form .pfp-search-help { margin: 10px 0; font-size: 13px; }
.pfp-search-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pfp-search-actions > button { width: auto; margin: 0; }
.pfp-search-results {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: 12px;
margin: 20px 0;
}
.pfp-search-result {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
padding: 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
}
.pfp-search-result > a { flex: 0 0 auto; line-height: 0; }
.pfp-search-result .pfp-thumb {
display: block;
width: clamp(56px, 16vw, 80px);
height: auto;
aspect-ratio: 1;
object-fit: contain;
border-radius: 8px;
}
.pfp-search-result > div { min-width: 0; flex: 1; }
.pfp-search-result .user-pill { max-width: 100%; }
.pfp-search-result .user-pill-name { min-width: 0; overflow: hidden; }
.pfp-search-result .user-pill-display,
.pfp-search-result .user-pill-handle {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pfp-search-result p {
margin: 8px 0 0;
color: var(--text-muted);
font-size: 13px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.pfp-search-result a:focus-visible { outline: 2px solid var(--blurple); outline-offset: 4px; }
/* Each neighboring image stays a distinct, directly linked asset. */
.pfp-neighbors {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 14px;
margin: 18px 0 24px;
}
.pfp-neighbor {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 12px;
color: var(--text-muted);
font-size: 12px;
text-align: center;
text-decoration: none;
}
.pfp-neighbor .pfp-thumb {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
border-radius: 6px;
}
.pfp-neighbor:hover { border-color: var(--blurple); color: var(--text); }
.pfp-neighbor:focus-visible { outline: 2px solid var(--blurple); outline-offset: 3px; }
/* /me "your profile on disdex": self-serve hide (src/hidden_users.rs) */
.privacy-item { display: flex; flex-direction: column; gap: 6px; }
.privacy-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.privacy-actions form { margin: 0; }
.privacy-hide > summary {
cursor: pointer; color: var(--text-muted); font-size: 13px; width: max-content;
list-style: none; margin-left: 42px;
}
.privacy-hide > summary::-webkit-details-marker { display: none; }
.privacy-hide > summary:hover { color: var(--red); }
.privacy-confirm {
margin: 8px 0 4px 42px; padding: 12px 14px; border-radius: 8px;
border: 1px solid rgba(240,71,71,0.4); background: rgba(240,71,71,0.06);
color: var(--text-muted); font-size: 13px; line-height: 1.5;
}
.privacy-confirm p { margin: 0 0 8px; }
.privacy-confirm ul { margin: 0 0 8px; padding-left: 18px; }
.privacy-confirm code { background: var(--bg-darkest); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@media (max-width: 560px) {
.privacy-hide > summary, .privacy-confirm { margin-left: 0; }
.linked-row { flex-wrap: wrap; }
.privacy-confirm code { word-break: break-all; }
}
.remove-hint { margin: 28px 0 8px; font-size: 13px; }
.remove-hint a { color: var(--text-muted); text-decoration: underline; }