/* ==========================================================================
   CraftRank — thème « Minecraft moderne »
   ========================================================================== */

/* Self-hosted fonts (no request to Google: GDPR) */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(/fonts/inter-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Press Start 2P'; font-weight: 400; font-display: swap; src: url(/fonts/press-start-2p-latin-400-normal.woff2) format('woff2'); }

:root {
  --bg: #0b0f14;
  --bg-2: #0f141b;
  --surface: #131922;
  --surface-2: #19202a;
  --surface-3: #202835;
  --line: #242d3a;
  --line-2: #323d4d;
  --text: #e9eef4;
  --muted: #a1adbd;
  --green: #45d17c;
  --green-2: #2fb866;
  --green-ink: #04220f;
  --gold: #f5c542;
  --diamond: #5ee0f0;
  --red: #f06565;
  --blue: #7cb2ff;
  --accent: var(--green);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 0 rgba(var(--hl-rgb),.03) inset, 0 12px 30px -18px rgba(0,0,0,.8);
  --pixel: 'Press Start 2P', monospace;
  /* semantic tokens (light theme below) */
  --hl-rgb: 255,255,255;   /* subtle hover / overlay tint */
  --btn-top: #52dc88;
  --text-2: #cfd6df;
  --ok-ink: #bff5d3;
  --bad-ink: #fca5a5;
  --warn-ink: #f5b301;
  --focus: #9af0bb;
  --gold-line: #6b5520;
  --chart: #2fae63;
  --code-ink: #cfe9d9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; font-size: calc(100% * var(--text-scale, 1)); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--text); font: .9375rem/1.6 Inter, system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(69,209,124,var(--glow, .10)), transparent 60%),
    radial-gradient(700px 400px at -10% 10%, rgba(94,224,240,var(--glow-2, .06)), transparent 60%),
    var(--bg);
}
main { flex: 1; padding-bottom: 64px; }
main:focus { outline: none; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
svg { flex: none; }
code { background: var(--bg-2); border: 1px solid var(--line); padding: 1px 7px; border-radius: 6px; font: 500 .85em ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 2rem; margin: 28px 0 12px; font-weight: 800; }
h2 { font-size: 1.3rem; margin: 32px 0 14px; font-weight: 700; }
h3 { font-size: 1.05rem; margin: 18px 0 8px; font-weight: 700; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 480px; margin-top: 40px; }
.narrow-wide { max-width: 880px; }
.muted { color: var(--muted); } .small { font-size: .86rem; } .center { text-align: center; }
.muted-link { color: var(--muted); } .muted-link:hover { color: var(--text); }
.inline { display: inline; margin: 0; }
.hl { background: linear-gradient(90deg, var(--green), var(--diamond)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--green); color: var(--green-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* ---------- Header ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.logo-cube { width: 38px; height: 44px; filter: drop-shadow(0 6px 10px rgba(69,209,124,.35)); transition: transform .25s; }
.brand:hover .logo-cube { transform: translateY(-2px) rotate(-4deg); }
/* Wide wordmark: larger and stretched horizontally */
.wordmark { display: inline-block; font: 800 1.7rem/1 Inter, system-ui, sans-serif; letter-spacing: .012em; transform: scaleX(1.08); transform-origin: left center; margin-right: .8rem; }
.footer .wordmark { font-size: 1.5rem; margin-right: .7rem; }
.wordmark-accent { background: linear-gradient(90deg, var(--green), var(--diamond)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.links > a:not(.btn), .link-btn { color: var(--muted); font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.links > a:not(.btn):hover, .link-btn:hover { color: var(--text); background: rgba(var(--hl-rgb),.05); text-decoration: none; }
.links > a.active { color: var(--text); background: rgba(var(--hl-rgb),.06); }
.link-btn { background: none; border: 0; cursor: pointer; font: inherit; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; }
.avatar { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), var(--diamond)); color: var(--green-ink); font-weight: 800; font-size: .75rem; text-transform: uppercase; }
.links .btn { margin-left: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--btn-top), var(--green-2)); color: var(--green-ink);
  border: 0; border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer;
  font: 700 .95rem/1.2 Inter, system-ui, sans-serif; text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -10px rgba(69,209,124,.7);
  transition: transform .1s, filter .15s, box-shadow .15s;
}
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn:hover { filter: brightness(1.07); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.22); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-sm { padding: 7px 13px; font-size: .86rem; border-radius: 8px; }
.btn-ghost { background: rgba(var(--hl-rgb),.03); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
.btn-ghost:hover { background: rgba(var(--hl-rgb),.07); }
.btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(240,101,101,.45); box-shadow: none; }
.btn-danger:hover { background: rgba(240,101,101,.1); }
.btn-vote { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent)); color: #06130b; }
.full { width: 100%; }

/* ---------- Flash ---------- */
.flash { margin: 18px 0; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid; font-weight: 500; }
.flash-success { background: rgba(69,209,124,.1); border-color: rgba(69,209,124,.35); color: var(--ok-ink); }
.flash-error { background: rgba(240,101,101,.1); border-color: rgba(240,101,101,.4); color: #fecaca; }
.flash-info { background: rgba(124,178,255,.1); border-color: rgba(124,178,255,.35); color: #d3e4ff; }
.flash-inline { color: var(--bad-ink); }

/* ---------- Forms ---------- */
input, select, textarea { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 11px 13px; font: inherit; width: 100%; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: #6f7b8c; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(69,209,124,.2); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green); padding: 0; }
input[type=color] { padding: 3px; height: 44px; }
input[type=file] { padding: 9px; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: .92rem; }
.form label.check, .check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.check input { margin-top: 2px; flex: none; }
.check input[type=radio] { width: 18px; height: 18px; accent-color: var(--green); padding: 0; }
.form h3 { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.form h3:first-of-type { border: 0; padding-top: 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin: 0; }
legend { padding: 0 6px; color: var(--muted); font-size: .9rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 16px; }
.upload-field { display: flex; flex-direction: column; gap: 8px; }
.thumb { display: flex; align-items: center; gap: 10px; }
.thumb img { max-height: 64px; max-width: 220px; border-radius: 8px; border: 1px solid var(--line); }
.gallery-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gallery-edit .thumb { flex-direction: column; align-items: flex-start; }
.gallery-edit img { max-width: 100%; }

/* ---------- Tags & badges ---------- */
.tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 500; white-space: nowrap; transition: all .15s; }
.tag:hover { color: var(--text); border-color: var(--line-2); text-decoration: none; }
.tag-on { background: var(--green); color: var(--green-ink); border-color: var(--green); font-weight: 700; }
.tag-on:hover { color: var(--green-ink); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: .7rem; font-weight: 800; background: var(--surface-3); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.badge-premium { background: rgba(245,197,66,.14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(245,197,66,.25); }
.badge-sponsor { background: linear-gradient(90deg, #f5c542, #f59e0b); color: #1a1000; }
.badge-ed { background: rgba(124,178,255,.12); color: #b7d3ff; }
.badge-warn { background: rgba(240,101,101,.15); color: var(--bad-ink); }
.ad-label { display: inline-block; font: 700 .66rem/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; border: 1px solid #7d8898; color: #c9d1dc; border-radius: 4px; padding: 4px 6px; vertical-align: middle; }
.ad-chip { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: .66rem; font-weight: 800; padding: 3px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 56px 0 36px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(var(--hl-rgb),.025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--hl-rgb),.025) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 70%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--ok-ink); background: rgba(69,209,124,.1); border: 1px solid rgba(69,209,124,.25); padding: 5px 12px; border-radius: 999px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(69,209,124,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(69,209,124,0); } 100% { box-shadow: 0 0 0 0 rgba(69,209,124,0); } }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin: 18px 0 14px; line-height: 1.08; letter-spacing: -.025em; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 560px; margin: 0 0 26px; }
.search { display: flex; gap: 8px; max-width: 620px; flex-wrap: wrap; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line-2); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); }
.search-field { flex: 1 1 240px; position: relative; display: flex; align-items: center; }
.search-field svg { position: absolute; left: 12px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input, .search select { border: 0; background: transparent; }
.search input { padding-left: 40px; }
.search input:focus, .search select:focus { box-shadow: none; }
.search select { flex: 0 0 160px; width: auto; border-left: 1px solid var(--line); border-radius: 0; }
.hero-stats { display: flex; gap: 36px; margin: 28px 0 0; flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column-reverse; }
.hero-stats dt { color: var(--muted); font-size: .82rem; }
.hero-stats dd { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.hero-art { display: flex; justify-content: center; }
.hero-scene { width: 100%; max-width: 380px; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.island { animation: bob 6s ease-in-out infinite; }
.float-diamond { animation: bob 4.5s ease-in-out infinite reverse; }
.float-gold { animation: bob 5.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.small-hero { padding: 40px 0 16px; text-align: center; }
.small-hero p { color: var(--muted); max-width: 640px; margin: 0 auto 20px; }

/* ---------- Sections ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.section-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-note { margin: 6px 0 14px; }
.count { font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }
.tag-filter { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 0 4px; }
.empty { padding: 48px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); margin-top: 16px; }
.empty-cube { width: 56px; height: 64px; opacity: .8; }

/* ---------- Sponsors ---------- */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.sponsor-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius); overflow: hidden; color: var(--text); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.sponsor-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); text-decoration: none; }
.sponsor-banner { position: relative; height: 110px; background-color: color-mix(in srgb, var(--accent) 35%, var(--bg)); background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px); }
.sponsor-body { position: relative; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sponsor-head { display: flex; align-items: flex-start; gap: 12px; margin-top: -28px; }
.sponsor-head > div { padding-top: 32px; min-width: 0; }
.sponsor-logo img, .sponsor-logo .logo-fallback { width: 58px; height: 58px; border-radius: 12px; border: 3px solid var(--surface); object-fit: cover; }
.sponsor-name { font-weight: 800; font-size: 1.05rem; }
.sponsor-body p { color: var(--muted); font-size: .88rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sponsor-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; margin-top: auto; }
.votes-mini { color: var(--muted); } .votes-mini strong { color: var(--text); }

/* ---------- Server list ---------- */
.srv-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
.srv {
  position: relative; display: grid; grid-template-columns: 52px 68px minmax(0, 1fr) 150px 210px; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.srv:hover { border-color: var(--line-2); }
.srv-premium { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 45%); }
.srv-premium::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.srv-rank { display: grid; place-items: center; }
.rank-num { font-family: var(--pixel); font-size: 13px; color: var(--muted); }
.srv-rank.top1 .rank-num, .srv-rank.top2 .rank-num, .srv-rank.top3 .rank-num {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: #1b1300; font-size: 14px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.4), 0 8px 18px -8px currentColor;
}
.srv-rank.top1 .rank-num { background: linear-gradient(180deg, #ffe07a, #e9a916); }
.srv-rank.top2 .rank-num { background: linear-gradient(180deg, #f1f5f9, #aab4c0); color: #1a2029; }
.srv-rank.top3 .rank-num { background: linear-gradient(180deg, #f3b27a, #b86b2d); color: #1f0f03; }
.srv-logo img, .logo-fallback { width: 68px; height: 68px; border-radius: 14px; object-fit: cover; image-rendering: pixelated; display: block; }
.logo-fallback {
  display: grid; place-items: center; font-family: var(--pixel); font-size: 1.3rem; color: #fff; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.35);
  background-color: color-mix(in srgb, var(--accent) 60%, #111); background-size: cover; background-position: center;
  background-image: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.25)), repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 8px, transparent 8px 16px), repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 8px, transparent 8px 16px);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25);
}
.logo-fallback[style*="background-image"] { text-shadow: none; }
.logo-fallback.big { width: 108px; height: 108px; font-size: 2.2rem; }
.srv-main { min-width: 0; }
.srv-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srv-title a { color: var(--text); font-weight: 800; font-size: 1.12rem; }
.srv-desc { margin: 5px 0 8px; color: var(--muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srv-banner img { display: block; margin-bottom: 8px; max-height: 60px; border-radius: 6px; }
.srv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.srv-tags .tag { padding: 3px 10px; font-size: .75rem; }
.srv-stats { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.votes { display: flex; flex-direction: column; line-height: 1.1; }
.votes strong { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.votes span { color: var(--muted); font-size: .78rem; }
.srv-side { display: flex; flex-direction: column; gap: 8px; }
.srv-side .btn { width: 100%; }
.ip-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font: 600 .84rem ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; min-width: 0; transition: border-color .15s, color .15s; }
.ip-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-copy svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; }
.ip-copy:hover { border-color: var(--green); }
.ip-copy.copied { border-color: var(--green); color: var(--green); border-style: solid; }
.ip-copy.big { font-size: 1rem; padding: 12px 18px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--muted); font-weight: 500; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: #4b5563; flex: none; }
.status.on { color: var(--ok-ink); }
.status.on .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(69,209,124,.18), 0 0 10px var(--green); }
.status.off .dot { background: var(--red); }
.status.unknown .dot { background: var(--muted); }
.status.big { font-size: 1rem; margin-bottom: 12px; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.pager a { min-width: 40px; text-align: center; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.pager a:hover { color: var(--text); text-decoration: none; }
.pager a.on { background: var(--green); color: var(--green-ink); border-color: var(--green); }

/* CTA */
.cta-band { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 30px; border-radius: 18px; border: 1px solid rgba(69,209,124,.3);
  background: radial-gradient(600px 200px at 0% 0%, rgba(69,209,124,.18), transparent 70%), radial-gradient(500px 200px at 100% 100%, rgba(94,224,240,.12), transparent 70%), var(--surface); }
.cta-band h2 { margin: 0 0 6px; }
.cta-band p { margin: 0; color: var(--muted); }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card h1:first-child, .card h2:first-child, .card h3:first-child { margin-top: 0; }
.vote-card h1 { margin-top: 10px; }
.danger-zone { border-color: rgba(240,101,101,.35); }
.upsell { border: 1px solid rgba(245,197,66,.4); background: linear-gradient(135deg, rgba(245,197,66,.1), var(--surface) 60%); }

/* ---------- Server page ---------- */
.sp-hero { position: relative; padding: 48px 0 28px; background-size: cover; background-position: center;
  background-image: radial-gradient(800px 260px at 20% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.is-premium .sp-hero { padding: 0 0 34px; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; }
.is-premium .sp-hero > .container { width: 100%; }
.is-premium .sp-hero > .container:first-child { margin-bottom: auto; }
.is-premium .sp-hero:not([style]) { background-image: radial-gradient(900px 340px at 20% 0%, color-mix(in srgb, var(--accent) 50%, transparent), transparent), linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--bg)), var(--bg)); }
.sp-hero-inner { display: flex; gap: 24px; align-items: flex-end; }
.sp-logo img { width: 108px; height: 108px; border-radius: 18px; object-fit: cover; border: 3px solid var(--accent); box-shadow: 0 16px 30px -12px rgba(0,0,0,.7); }
.sp-logo .logo-fallback { border: 3px solid var(--accent); }
.sp-head h1 { margin: 10px 0 6px; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.02em; }
.is-premium .sp-head h1 { text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.sp-short { margin: 0 0 16px; color: var(--text-2); font-size: 1.05rem; }
.sp-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; margin-top: 22px; }
.is-premium .card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.is-premium .prose a { color: var(--accent); }
.sp-basic-banner { border-radius: var(--radius); margin-bottom: 16px; display: block; }
.owner-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px dashed var(--line-2); padding: 12px 16px; border-radius: var(--radius-sm); margin-top: 18px; font-size: .9rem; }
.video { position: relative; aspect-ratio: 16/9; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-consent { background: var(--bg-2); display: grid; place-items: center; }
.video-placeholder { max-width: 460px; text-align: center; padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.video-placeholder p { margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.gallery img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; transition: transform .2s; }
.gallery a:hover img { transform: scale(1.03); }
.prose { overflow-wrap: anywhere; } .prose img { border-radius: 10px; }
.prose h2 { font-size: 1.2rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0 0 14px; font-size: .9rem; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; text-align: right; font-weight: 600; }
.recap { grid-template-columns: 150px 1fr; } .recap dd { text-align: left; font-weight: 500; }
.voters { list-style: none; padding: 0; margin: 0 0 16px; counter-reset: v; }
.voters li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); counter-increment: v; }
.voters li::before { content: counter(v); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-3); color: var(--muted); font-size: .72rem; font-weight: 700; }
.voters li:nth-child(1)::before { background: #e9a916; color: #1b1300; }
.voters li:nth-child(2)::before { background: #aab4c0; color: #1a2029; }
.voters li:nth-child(3)::before { background: #b86b2d; color: #1f0f03; }
.voter-name { flex: 1; }

/* ---------- Plans ---------- */
.plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
.plan-col { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: var(--shadow); }
.plan-col h2 { margin-top: 0; } .plan-col h2 .badge { font-size: .95rem; padding: 6px 13px; }
.sponsor-col { border-color: rgba(245,197,66,.45); background: radial-gradient(500px 200px at 100% 0%, rgba(245,197,66,.1), transparent 70%), var(--surface); }
.perks { padding-left: 0; list-style: none; margin: 16px 0 20px; }
.perks li { padding: 5px 0 5px 28px; position: relative; }
.perks li::before { content: ''; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border-radius: 4px; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2304220f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.plans { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.plans > .plan { flex: 0 0 calc((100% - 24px) / 3); min-width: 130px; }   /* 3 per row; a lone last card (e.g. 1 an) is centered */
.plan { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .15s; }
.plan:hover { border-color: var(--line-2); transform: translateY(-2px); }
.plan-label { font-weight: 700; color: var(--muted); font-size: .9rem; }
.plan-price { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.plan-price small { font-size: .7rem; font-weight: 600; }
.plan form { margin-top: 10px; }
.plan-best { border-color: rgba(69,209,124,.5); background: linear-gradient(180deg, rgba(69,209,124,.08), var(--bg-2)); }
.plan-ribbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--green); color: var(--green-ink); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; }

/* ---------- Dashboard / admin ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.dash-card { border-top: 3px solid var(--accent); }
.dash-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dash-top a { color: var(--text); font-size: 1.1rem; }
.dash-stats { display: flex; gap: 28px; margin: 16px 0; }
.dash-stats div { display: flex; flex-direction: column; }
.dash-stats strong { font-size: 1.5rem; font-weight: 800; } .dash-stats span { color: var(--muted); font-size: .8rem; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat { display: flex; flex-direction: column; }
.stat strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; } .stat span { color: var(--muted); font-size: .85rem; }
.admin-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.card .table-wrap { border: 0; background: none; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table tbody tr:hover { background: rgba(var(--hl-rgb),.02); }
.table th { color: var(--muted); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.table input, .table select { padding: 6px 9px; }
.table .w-num { width: 90px; }
.table.wrap th, .table.wrap td { white-space: normal; vertical-align: top; }
tr.dim, .dim { opacity: .55; }
.reports .report { margin-bottom: 12px; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.hide-form { display: inline-flex; gap: 4px; }
.w-reason { width: 170px; padding: 6px 9px; }
.legal h2 { margin-top: 34px; } .legal li { margin-bottom: 6px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(0,0,0,var(--footer-shade, .25))); padding: 40px 0 22px; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { color: var(--muted); margin: 12px 0 0; max-width: 420px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin: 4px 0 6px; }
.footer-col a { color: var(--muted); } .footer-col a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .srv { grid-template-columns: 44px 60px minmax(0, 1fr) 190px; }
  .srv-stats { grid-column: 3; grid-row: 2; flex-direction: row; align-items: center; gap: 16px; }
  .votes { flex-direction: row; align-items: baseline; gap: 6px; }
  .votes strong { font-size: 1.1rem; }
  .srv-side { grid-column: 4; grid-row: 1 / span 2; }
}
@media (max-width: 860px) {
  .hero { padding-top: 36px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-scene { max-width: 170px; }
  .hero-art { margin-bottom: -8px; }
  .hero-stats { gap: 24px; }
  .srv { grid-template-columns: 40px 52px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .srv-logo img, .srv .logo-fallback { width: 52px; height: 52px; border-radius: 12px; font-size: 1rem; }
  .srv-stats { grid-column: 1 / -1; grid-row: auto; justify-content: space-between; }
  .srv-side { grid-column: 1 / -1; grid-row: auto; flex-direction: row; }
  .srv-side .ip-copy { flex: 1; } .srv-side .btn { width: auto; }
  .sp-grid, .plan-cols, .admin-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .sp-hero-inner { flex-direction: column; align-items: flex-start; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .is-premium .sp-hero { padding-top: 0; }
  .search select { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--line); }
  .search .btn { flex: 1 1 100%; }
  .tag-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 6px 20px 8px; }
  .tag-filter::-webkit-scrollbar { display: none; }
  .topbar { position: static; }
  .wordmark { font-size: 1.4rem; margin-right: .65rem; }
  .logo-cube { width: 32px; height: 37px; }
  .links { gap: 2px; }
  .links > a:not(.btn), .link-btn { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Checkout: promo code */
.promo-form { margin: 4px 0 18px; display: flex; flex-direction: column; gap: 6px; }
.promo-row { display: flex; gap: 8px; max-width: 380px; }
.promo-row input { text-transform: uppercase; }
.forgot-link { align-self: flex-end; margin-top: -8px; }

/* Charts (single series, server-rendered SVG) */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-top: 16px; }
.chart-card h2 { font-size: 1rem; margin: 0 0 12px; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid line, .chart .chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-tick { fill: var(--muted); font: 500 11px Inter, system-ui, sans-serif; }
.chart-bar path { fill: var(--chart); transition: opacity .15s; }
.chart-hit { fill: transparent; }
.chart-bar:hover path, .chart-bar:focus path { fill: var(--green); }
.chart-bar:focus { outline: none; }
.chart-bar:focus .chart-hit { fill: rgba(var(--hl-rgb),.04); }
.chart-tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); background: var(--surface-3); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; font-size: .8rem; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0,0,0,.7); z-index: 5; }
.chart-tip strong { display: block; font-size: .95rem; }
.chart-table { margin-top: 10px; font-size: .85rem; }
.chart-table summary { cursor: pointer; color: var(--muted); }
.chart-table .table { margin-top: 8px; }
.page-head { margin-top: 8px; align-items: center; }
.page-head h1 { margin: 12px 0; }
.stat small { margin-top: 2px; }
@media (max-width: 860px) { .chart-grid { grid-template-columns: 1fr; } }

/* Share page */
.share-preview img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.snippet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.snippet-head h2 { font-size: 1rem; margin: 0 0 2px; }
.snippet-head p { margin: 0 0 10px; }
.code { margin: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: 500 .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; color: var(--code-ink); }

/* Admin sub-navigation */
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; }
.admin-nav a { color: var(--muted); padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: .9rem; }
.admin-nav a:hover { color: var(--text); text-decoration: none; background: rgba(var(--hl-rgb),.04); }
.admin-nav a.on { background: var(--green); color: var(--green-ink); }
.flag { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 3px 9px; border-radius: 999px; background: rgba(240,101,101,.12); color: var(--bad-ink); border: 1px solid rgba(240,101,101,.3); margin: 2px 4px 2px 0; }
.flag::before { content: '⚠'; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input { max-width: 320px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.inline-form input { width: auto; padding: 6px 9px; }
.hash { font: 500 .78rem ui-monospace, monospace; color: var(--muted); }
.danger-details { display: inline-block; } .danger-details summary { list-style: none; } .danger-details summary::-webkit-details-marker { display: none; } .danger-details[open] form { margin-top: 6px; }

/* Site-wide promo banner */
.promo-banner { background: linear-gradient(90deg, #1f7a45, #1d6f78); color: #eafff2; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .92rem; }
.promo-blue { background: linear-gradient(90deg, #1d4f9a, #1d6f78); } .promo-purple { background: linear-gradient(90deg, #5b2a9a, #3a3fa0); }
.promo-orange { background: linear-gradient(90deg, #a85410, #9a3a1d); } .promo-red { background: linear-gradient(90deg, #a01d2f, #7a1d4f); }
.promo-inner { display: flex; align-items: center; gap: 12px; min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
.promo-inner p { margin: 0; flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.promo-emoji { font-size: 1.1rem; }
.promo-code { font: 800 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; background: rgba(0,0,0,.28); color: #fff; border: 1px dashed rgba(255,255,255,.55); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.promo-code:hover { background: rgba(0,0,0,.4); }
.promo-until { opacity: .85; }
.promo-cta { background: #fff; color: #0b3d22; box-shadow: none; }
.promo-close { background: none; border: 0; color: inherit; font-size: 1rem; cursor: pointer; opacity: .8; padding: 6px; border-radius: 6px; }
.promo-close:hover { opacity: 1; background: rgba(0,0,0,.2); }
.plan-promo { margin-top: 4px; font-size: .82rem; color: var(--ok-ink); background: rgba(69,209,124,.12); border-radius: 6px; padding: 4px 6px; }
.plan-promo span { font-family: ui-monospace, monospace; font-weight: 700; }
.promo-suggest { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .promo-cta { display: none; } .promo-inner { font-size: .85rem; } }

/* Security check-up */
.checks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 18px; }
.check-item { margin: 0; border-left: 4px solid var(--line-2); }
.check-item p { margin: 6px 0 0; }
.check-critical { border-left-color: var(--red); background: linear-gradient(90deg, rgba(240,101,101,.08), var(--surface) 50%); }
.check-warning { border-left-color: var(--gold); }
.check-ok { border-left-color: var(--green); }
.check-info { border-left-color: var(--blue); }
.admin-alert { margin-bottom: 18px; }

/* FAQ */
.faq .small-hero { padding-bottom: 8px; }
.faq-search { max-width: 560px; margin: 0 auto; }
.faq-search input { padding-left: 40px; background: var(--surface); }
.faq-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 8px; }
.faq-section { margin-top: 30px; scroll-margin-top: 90px; }
.faq-section h2 { margin: 0 0 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; transition: border-color .15s; }
.faq-item[open] { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.faq-item summary { cursor: pointer; list-style: none; padding: 15px 48px 15px 18px; font-weight: 700; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-item summary:hover { color: var(--green); }
.faq-answer { padding: 0 18px 14px; color: var(--text-2); }
.faq-answer p { margin: 0 0 8px; }
.faq-answer ul, .faq-answer ol { margin: 0 0 8px; padding-left: 20px; }
.faq-answer li { margin-bottom: 4px; }
.faq-contact { margin-top: 36px; }
.faq-contact h2 { margin-top: 0; }
.faq mark { background: rgba(69,209,124,.3); color: inherit; border-radius: 3px; }
.faq-nav .tag { gap: 6px; }
.sponsor-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Category pages */
.breadcrumb { margin-top: 18px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.cat-hero { display: flex; gap: 20px; align-items: flex-start; margin: 10px 0 8px; }
.cat-hero h1 { margin: 6px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.cat-hero .lead { max-width: 760px; margin: 0; }
.cat-emoji { font-size: 2.6rem; line-height: 1; flex: none; width: 64px; height: 64px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.cat-others { margin-top: 40px; }
.cat-others h2 { margin-bottom: 10px; }
.cat-others .tag { gap: 6px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: var(--text); transition: transform .15s, border-color .15s; }
.cat-card:hover { transform: translateY(-2px); border-color: var(--green); text-decoration: none; }
.cat-card .cat-emoji { width: 48px; height: 48px; font-size: 1.8rem; border-radius: 12px; }
.cat-card.cat-empty { border-style: dashed; }
.cat-card.cat-empty .cat-name { color: var(--muted); }
.cat-card.cat-empty:hover { transform: none; border-color: var(--line); }
.cat-name { font-weight: 800; font-size: 1.05rem; }
@media (max-width: 860px) { .cat-hero { flex-direction: column; gap: 10px; } .cat-hero .cat-emoji { width: 52px; height: 52px; font-size: 2rem; } }

/* Reviews */
.stars { --v: 0; position: relative; display: inline-block; font-size: 1rem; letter-spacing: 2px; line-height: 1; color: var(--line-2);
  background: linear-gradient(90deg, var(--gold) calc(var(--v) / 5 * 100%), var(--line-2) 0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.reviews-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.reviews-head h2 { margin: 0; }
.rating-summary { display: flex; align-items: center; gap: 12px; }
.rating-big { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.rating-summary .stars { font-size: 1.2rem; }
.rating-dist { margin: 14px 0 6px; display: grid; gap: 4px; max-width: 360px; }
.dist-row { display: grid; grid-template-columns: 34px 1fr 30px; gap: 8px; align-items: center; }
.dist-bar { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.review-form-wrap { margin: 14px 0; }
.review-form-wrap > summary { list-style: none; }
.review-form-wrap > summary::-webkit-details-marker { display: none; }
.review-form { margin-top: 12px; }
.star-input, .form fieldset.star-input { display: block; border: 0; padding: 0; margin: 0; position: relative; }
.star-row { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 4px; position: relative; }
.star-input legend { padding: 0 0 4px; font-weight: 600; font-size: .92rem; color: var(--text); }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 1.9rem; line-height: 1; color: var(--line-2); cursor: pointer; transition: color .1s, transform .1s; flex-direction: row !important; }
.star-input input:checked ~ label { color: var(--gold); }
@media (hover: hover) { .star-input:has(label:hover) label { color: var(--line-2); } .star-input label:hover, .star-input label:hover ~ label { color: var(--gold); } }
.star-input input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.star-input label:active { transform: scale(.9); }
.review-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 14px; }
.review { border-top: 1px solid var(--line); padding-top: 14px; }
.review-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-text { margin: 8px 0; color: #d7dde6; }
.review-reply { margin: 8px 0 0 16px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--bg-2); border-radius: 0 8px 8px 0; }
.review-reply p { margin: 4px 0 0; }
.review-actions { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; }
.review-actions summary { list-style: none; cursor: pointer; color: var(--muted); }
.reviews-info { margin-top: 18px; }
.reviews-info summary { cursor: pointer; }
.badge-rating { background: rgba(245,197,66,.14); color: var(--gold); text-transform: none; }
.badge-rating:hover { text-decoration: none; }
.row-rating { font-size: .8rem; font-weight: 700; color: var(--gold); }
.row-rating span { color: var(--muted); font-weight: 500; }
blockquote.card { margin: 0 0 16px; border-left: 3px solid var(--line-2); }
.discord-card { border-color: rgba(88,101,242,.45); background: radial-gradient(500px 160px at 100% 0%, rgba(88,101,242,.14), transparent 70%), var(--surface); }
.discord-steps { padding-left: 20px; display: grid; gap: 10px; }
.discord-steps li { line-height: 2; }

/* Ranking tabs (month / trending / new) */
.rank-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 28px 0 -12px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; }
.rank-tabs a { color: var(--muted); padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: .92rem; }
.rank-tabs a:hover { color: var(--text); text-decoration: none; background: rgba(var(--hl-rgb),.04); }
.rank-tabs a.on { background: var(--green); color: var(--green-ink); }
.srv-rank.rank-new .rank-num { font-size: 9px; color: var(--green-ink); background: var(--green); padding: 6px 5px; border-radius: 6px; }
.srv-note { margin: -4px 0 8px; font-size: .84rem; font-weight: 600; color: var(--green); }

/* Favorite button (server page) */
.fav-form { display: inline-flex; margin: 0; }
.btn-fav[aria-pressed="true"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--line-2)); }

/* Player space */
.player-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 12px; }
.player-stats .card { margin: 0; padding: 16px 18px; }
.player-stats dt { color: var(--muted); font-size: .8rem; font-weight: 600; }
.player-stats dd { margin: 4px 0 0; font-size: 1.6rem; font-weight: 800; }
.player-stats small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.fav-card { margin: 0; display: flex; flex-direction: column; gap: 14px; border-top: 3px solid var(--accent); }
.fav-top { display: flex; align-items: center; gap: 12px; }
.fav-logo img, .fav-logo .logo-fallback { width: 48px; height: 48px; border-radius: 10px; }
.fav-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fav-name a { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-remove { margin: 0; }
.icon-btn { background: none; border: 1px solid var(--line-2); color: var(--gold); width: 36px; height: 36px; border-radius: 8px; font-size: 1.1rem; cursor: pointer; }
.icon-btn:hover { background: rgba(var(--hl-rgb),.05); }
.fav-wait { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--muted); text-align: center; }
.narrow-card { max-width: 640px; margin-top: 28px; }
@media (max-width: 860px) { .player-stats { grid-template-columns: repeat(2, 1fr); } }
.form fieldset { display: flex; flex-direction: column; gap: 10px; }
#reglages, #signalements, #tendances { scroll-margin-top: 90px; }
.form label .small, .form label .muted { font-weight: 400; }

/* Payments: guarantees strip, how-it-works, pricing FAQ */
.pay-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0 0 22px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.pay-trust li { display: inline-flex; align-items: center; gap: 7px; }
.how { margin-top: 48px; }
.how h2, .pricing-faq h2 { text-align: center; }
.how-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0; margin: 20px 0 14px; }
.how-steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.how-steps li::before { content: counter(step); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: var(--green-ink); font-family: var(--pixel); font-size: 11px; margin-bottom: 4px; }
.how-steps span { color: var(--muted); font-size: .9rem; }
.pricing-faq { margin: 48px auto 0; }
.pay-next { margin: 0; }
@media (max-width: 860px) { .how-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .how-steps { grid-template-columns: 1fr; } }
.nowrap { white-space: nowrap; }

/* Serveur du mois */
.winner-card { display: flex; gap: 24px; align-items: center; margin-top: 18px; padding: 26px; border-radius: 18px; border: 1px solid var(--gold-line);
  background: radial-gradient(120% 140% at 0% 0%, rgba(245,197,66,.16), transparent 55%), var(--surface); box-shadow: var(--shadow); }
.winner-trophy { font-size: 64px; line-height: 1; filter: drop-shadow(0 10px 22px rgba(245,197,66,.35)); }
.winner-kicker { margin: 0; color: var(--gold); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.winner-body h2 { margin: 4px 0 6px; font-size: 1.8rem; } .winner-body h2 a { color: var(--text); }
.winner-body p { margin: 0 0 10px; }
.race { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; max-width: 640px; }
.race li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.race li a { color: var(--text); font-weight: 700; flex: 1; }
.race-pos { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-family: var(--pixel); font-size: 11px; background: var(--surface-3); }
.race-pos.top1 { background: linear-gradient(180deg, #ffe07a, #e9a916); color: #1b1300; }
.race-pos.top2 { background: linear-gradient(180deg, #f1f5f9, #aab4c0); color: #1a2029; }
.race-pos.top3 { background: linear-gradient(180deg, #f3b27a, #b86b2d); color: #1f0f03; }
.badge-winner { background: linear-gradient(180deg, #ffe07a, #e9a916); color: #1b1300; border-color: transparent; }
.home-winner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--gold-line); background: linear-gradient(90deg, rgba(245,197,66,.12), var(--surface) 60%); }
.home-winner a { font-weight: 700; }
@media (max-width: 640px) { .winner-card { flex-direction: column; text-align: center; } .winner-card .cta-actions { justify-content: center; } }

/* Guides */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.guide-card { margin: 0; display: flex; flex-direction: column; gap: 8px; color: var(--text); transition: border-color .15s, transform .15s; }
.guide-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--green) 50%, var(--line)); transform: translateY(-2px); }
.guide-emoji { font-size: 1.8rem; line-height: 1; } .guide-emoji.big { font-size: 2.6rem; }
.guide-head { margin: 10px 0 8px; } .guide-head h1 { margin: 12px 0 8px; line-height: 1.15; }
.guide-body { font-size: 1.02rem; line-height: 1.7; }
.guide-body h2 { font-size: 1.35rem; margin: 34px 0 10px; }
.guide-body li { margin: 6px 0; }
.guide-body pre.code { white-space: pre; overflow-x: auto; }

/* Admin → Démarchage */
.prospect-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.prospect-stats .card { margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.prospect-stats strong { font-size: 1.5rem; font-weight: 800; }
.ps-label { color: var(--muted); font-size: .8rem; font-weight: 600; }
.ps-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
.ps-bar span { display: block; height: 100%; background: var(--green); border-radius: 99px; }
a.ps-due:hover { text-decoration: none; } .ps-due.is-due { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); } .ps-due.is-due strong { color: var(--gold); }
.add-prospect summary { cursor: pointer; } .add-prospect[open] summary { margin-bottom: 14px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pf-checks { display: flex; gap: 22px; flex-wrap: wrap; }
.table.prospects td { vertical-align: top; }
.table.prospects select { max-width: 150px; }
.table.prospects .actions { white-space: nowrap; }
.table.prospects .actions form { margin-top: 4px; }
.row-due { background: rgba(245,197,66,.08); } .row-ok { background: rgba(69,209,124,.07); } .row-off td { color: var(--muted); }
.due-label { color: var(--gold); font-weight: 700; }
.match-hint { margin: 6px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.method summary { cursor: pointer; } .method[open] summary { margin-bottom: 10px; }
.method-steps, .method-channels { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 6px; }
.method h3 { margin: 12px 0 6px; }
.method-tip { border-left: 3px solid var(--green); }
.outreach-insights { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
.outreach-insights .card { margin: 0; }
.outreach-insights h3 { margin: 0 0 10px; font-size: 1rem; }
.outreach-insights h3:not(:first-child) { margin-top: 18px; }
.table.compact td, .table.compact th { padding: 6px 10px; }
.reason-bars { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.reason-bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.reason-bars .rb { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.reason-bars .rb span { display: block; height: 100%; background: var(--gold); }
.pstatus { font-weight: 600; }
.refuse { display: inline-block; margin-top: 4px; }
.refuse summary { list-style: none; } .refuse summary::-webkit-details-marker { display: none; }
.refuse-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 200px; }
.toolbar .refuse-form, .inline-form.refuse-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (max-width: 820px) { .outreach-insights { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1020px) { .prospect-stats { grid-template-columns: repeat(2, 1fr); } }

/* Growth tools */
.visual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 16px; }
.visual-card img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; margin: 8px 0 12px; }
.visual-card pre.code { white-space: pre-wrap; }
pre.code.msg { white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; font-family: Inter, system-ui, sans-serif; font-size: .95rem; line-height: 1.55; }

/* Community Discord */
.nav-discord { display: inline-flex; align-items: center; gap: 6px; }
.nav-discord svg { width: 18px; height: 18px; fill: #8b95f5; }
.community-box { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }

/* Player-count history (server page) */
.player-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 8px; }
.player-kpis div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.player-kpis dt { color: var(--muted); font-size: .78rem; font-weight: 600; }
.player-kpis dd { margin: 2px 0 0; font-size: 1.3rem; font-weight: 800; }

/* Hosting partners */
.partners-box { margin-top: 22px; }
.partners-box h2 { font-size: 1.1rem; }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.partner { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, transform .15s; }
.partner:hover { text-decoration: none; border-color: color-mix(in srgb, var(--green) 50%, var(--line)); transform: translateY(-2px); }
.partner .badge { align-self: flex-start; }
.partner-cta { margin-top: auto; color: var(--green); font-weight: 700; font-size: .88rem; }
.partners-note { margin: 0; }
.partner-form { margin-bottom: 4px; }
.partner-del { margin: 0 0 18px; }

/* Admin → Audience */
.audience-kpis { grid-template-columns: repeat(4, 1fr); }
.bars { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(90px, 36%) 1fr auto; align-items: center; gap: 10px; font-size: .9rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar-track span { display: block; height: 100%; background: #2fae63; border-radius: 99px; }
.bar-n { font-weight: 700; min-width: 3ch; text-align: right; }
@media (max-width: 1020px) { .audience-kpis { grid-template-columns: repeat(2, 1fr); } }
.footer-col .install-app { padding: 0; background: none; border: 0; text-align: left; font: inherit; color: var(--muted); cursor: pointer; }
.footer-col .install-app:hover { color: var(--text); background: none; }

/* Admin → Suggestions (prospect finder) */
.gap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.gap { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.gap:hover { text-decoration: none; border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.gap.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--surface-2)); }
.search-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.finder-results { margin-top: 18px; }
.finder-name { max-width: 220px; padding: 6px 9px; }

/* SEO blocks on the server page */
.sp-crumbs { padding-top: 14px; }
.qa dt { font-weight: 700; margin-top: 12px; } .qa dt:first-child { margin-top: 0; }
.qa dd { margin: 4px 0 0; color: var(--muted); }
.similar { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.similar a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.similar a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.similar img, .similar .logo-fallback { width: 40px; height: 40px; border-radius: 8px; flex: none; font-size: 1rem; }
.similar a > span { display: flex; flex-direction: column; min-width: 0; }
.sp-crumbs { margin-bottom: 14px; }

/* Home: "Trouver le bon serveur Minecraft" */
.home-guide { margin-top: 36px; }
.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
.about-grid h3 { font-size: 1rem; margin: 14px 0 4px; }
.about-grid p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* Share page: widget previews */
.widget-previews { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 14px; }
.widget-previews p { margin: 0 0 6px; }
#widget pre.code { white-space: pre-wrap; word-break: break-all; }

/* Owner: "Tester la connexion" */
.status-ok { border-left: 4px solid var(--green); } .status-ko { border-left: 4px solid #f06565; }
.status-ok h2, .status-ko h2 { margin-top: 0; }
.check-list { padding-left: 22px; display: grid; gap: 10px; margin: 0 0 12px; }
.notice-warn { background: rgba(245,197,66,.1); border: 1px solid rgba(245,197,66,.4); border-radius: 10px; padding: 10px 12px; }

/* Player loyalty: thank-you page, achievements, top voters */
.thanks-hero { text-align: center; padding: 28px 20px; margin-top: 12px; }
.thanks-hero h1 { margin: 8px 0 6px; }
.thanks-check { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; font-weight: 800;
  background: var(--accent); color: #06130b; animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thanks-check { animation: none; } }
.thanks-reward { font-weight: 700; color: var(--green); }
.thanks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 14px 0; }
.thanks-grid .card { margin: 0; }
.thanks-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; align-items: center; }
.ts-big { font-size: 2rem; font-weight: 800; }
.thanks-next { text-align: center; margin: 4px 0 14px; }
.unlocked { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); text-align: center; }
.unlocked h2 { margin-top: 0; }
.unlocked-list { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; }
.thanks-others { display: flex; flex-wrap: wrap; gap: 8px; }
.thanks-cta h2 { margin-top: 0; }
.badge-grid { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.badge-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: .55; }
.badge-item.is-done { opacity: 1; border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.badge-icon { font-size: 1.8rem; filter: grayscale(1); } .is-done .badge-icon { filter: none; }
.badge-name { font-weight: 700; font-size: .92rem; }
.badge-desc { color: var(--muted); font-size: .8rem; }
.badge-bar { width: 100%; height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.badge-bar span { display: block; height: 100%; background: var(--green); }
.voter-podium { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.voter-podium li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; overflow-wrap: anywhere; }
.voter-podium .p1 { order: 2; padding-top: 30px; border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); } .voter-podium .p2 { order: 1; } .voter-podium .p3 { order: 3; }
.vp-medal { font-size: 2rem; }
.badge-legend { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; }

/* Admin → Croissance */
.growth-head { align-items: center; justify-content: space-between; }
.growth-head h2 { margin: 0; }
.growth-head .rank-tabs { margin: 0; }
.growth-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 14px 0 6px; }
.growth-kpis .card { margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.growth-kpis strong { font-size: 1.5rem; font-weight: 800; }
.delta-up { color: var(--green); } .delta-down { color: var(--red); }
.growth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.growth-grid .card { margin: 0; }
.growth-grid h3 { margin: 0 0 10px; font-size: 1rem; }
.growth-grid h3:not(:first-child) { margin-top: 18px; }
.gchart { width: 100%; height: auto; display: block; }
.g-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.g-axis { stroke: var(--line); stroke-width: 1; }
.g-tick { fill: var(--muted); font-size: 11px; }
.g-fill { fill: var(--green); }
.g-hit { fill: transparent; }
.g-bar:hover .g-hit { fill: rgba(var(--hl-rgb),.05); }
.g-bar:hover .g-fill { fill: color-mix(in srgb, var(--green) 80%, #fff); }
.hbars { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.hbars li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 4.2em 3.2em; gap: 10px; align-items: center; font-size: .9rem; }
.hb-label { overflow-wrap: anywhere; }
.hb-track { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.hb-track span { display: block; height: 100%; background: var(--green); border-radius: 0 4px 4px 0; }
.hb-rate { text-align: right; } .hbars strong { text-align: right; }
@media (max-width: 1020px) { .growth-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .growth-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .growth-grid { grid-template-columns: minmax(0, 1fr); } }

/* Home page: live activity */
.live-ticker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: .92rem; }
.live-ticker .lt-text { min-width: 0; overflow-wrap: anywhere; }
.live-ticker.flash-new { border-color: color-mix(in srgb, var(--green) 60%, var(--line)); transition: border-color .6s; }
.live h2 { display: flex; align-items: center; gap: 10px; }
.live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.live-grid .card { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.live-grid h3 { margin: 0; font-size: 1rem; }
.live-feed, .live-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.live-feed li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; align-items: baseline; }
.live-feed li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.live-feed li > span:last-child { white-space: nowrap; }
.live-feed li.is-new { animation: live-in .6s ease-out; }
@keyframes live-in { from { background: color-mix(in srgb, var(--green) 18%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .live-feed li.is-new { animation: none; } }
.live-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .92rem; }
.live-list a, .ll-name { overflow-wrap: anywhere; font-weight: 600; }
.ll-rank { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--accent, var(--surface-3)); color: #fff; color: oklch(from var(--accent) clamp(0, (.7 - l) * 1000, 1) 0 0) /* black on light accents */; }
.ll-up { color: var(--green); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.ll-medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface-3); color: var(--text); }
.ll-m1 { background: linear-gradient(180deg, #ffe07a, #e9a916); color: #3a2600; } .ll-m2 { background: #cfd6df; color: #1b1f25; } .ll-m3 { background: #d98b4a; color: #2a1405; }
@media (max-width: 900px) { .live-grid { grid-template-columns: minmax(0, 1fr); } }
.live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent); }

/* Owner: monthly report */
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.report-head h1 { margin-bottom: 0; }
.report-nav { display: flex; gap: 8px; }
.report-win { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.report-kpis .card { margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.report-kpis strong { font-size: 1.6rem; font-weight: 800; }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-grid .card { margin: 0; }
.report-grid h2 { margin-top: 0; font-size: 1.1rem; }
.report-tips { padding-left: 20px; display: grid; gap: 10px; margin: 0; }
.report-mail { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.report-mail p { margin: 0; }
@media (max-width: 720px) { .report-grid { grid-template-columns: minmax(0, 1fr); } }

/* Server events */
.ev-list { display: grid; gap: 14px; margin: 16px 0; }
.ev-card { margin: 0; display: flex; gap: 16px; align-items: flex-start; border-left: 4px solid var(--accent, var(--green)); }
.ev-card.is-past { opacity: .6; }
.ev-logo img, .ev-logo .logo-fallback { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; object-fit: cover; background: var(--accent); color: #fff; color: oklch(from var(--accent) clamp(0, (.7 - l) * 1000, 1) 0 0) /* black on light accents */; font-weight: 800; font-size: 1.4rem; }
.ev-body { min-width: 0; flex: 1; }
.ev-body h2, .ev-body h3 { margin: 6px 0 4px; font-size: 1.15rem; overflow-wrap: anywhere; }
.ev-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ev-kind { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--surface-3); }
.ev-kind.is-live { background: rgba(240,101,101,.15); color: #ff8a8a; }
.ev-desc { white-space: pre-line; overflow-wrap: anywhere; color: var(--text); margin: 8px 0; }
.ev-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ev-mini { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.ev-mini li { display: flex; flex-direction: column; gap: 2px; }
.ev-mini .ev-kind { align-self: flex-start; }

/* Public player profile */
.profile-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #45d17c, #5ee0f0); color: #04220f; flex: none; }
.profile-id { flex: 1; min-width: 0; }
.profile-id h1 { margin: 0; overflow-wrap: anywhere; }
.profile-id p { margin: 4px 0 0; }
.profile-servers { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; gap: 10px; }
.profile-servers li { margin: 0; display: flex; align-items: center; gap: 14px; }
.profile-servers li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.health-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }

/* Admin: second row with the sub-pages of the open section */
.admin-subnav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 20px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.admin-subnav a { color: var(--muted); padding: 8px 12px; font-weight: 600; font-size: .88rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-subnav a:hover { color: var(--text); text-decoration: none; }
.admin-subnav a.on { color: var(--text); border-bottom-color: var(--green); }
@media (max-width: 720px) {
  .admin-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav a { white-space: nowrap; }
  .admin-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .admin-subnav a { white-space: nowrap; }
}

/* My profile */
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; }
.my-servers { display: grid; gap: 12px; margin: 12px 0 20px; }
.my-server { margin: 0; display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--accent, var(--green)); }
.my-server-head { display: flex; gap: 14px; align-items: center; }
.my-server-name { min-width: 0; overflow-wrap: anywhere; }
.my-server-links { display: flex; flex-wrap: wrap; gap: 6px; }
.fav-mini { list-style: none; padding: 0; margin: 12px 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.fav-mini li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
@media (max-width: 720px) { .profile-actions { flex-direction: row; flex-wrap: wrap; width: 100%; } }

/* Notifications */
.nav-bell { position: relative; display: inline-flex; align-items: center; padding: 6px 8px; }
.nav-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bell-count { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #d63a3a; color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.notif-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.notif { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; color: var(--text); }
.notif:hover { text-decoration: none; border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.notif.is-new { border-left: 4px solid var(--green); }
.notif-live { margin-bottom: 12px; justify-content: flex-start; border-color: color-mix(in srgb, var(--green) 50%, var(--line)); }
.notif-ico { font-size: 1.4rem; }

/* Comparator */
.compare-add { margin: 0 0 16px; } .compare-add select { max-width: 320px; }
.table.compare th[scope=row] { color: var(--muted); font-weight: 600; white-space: nowrap; }
.table.compare thead th { vertical-align: top; border-top: 4px solid var(--accent, var(--green)); }
.table.compare thead th { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.table.compare thead .cmp-head strong { font-size: 1rem; }
.cmp-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; color: var(--text); }
.cmp-head img, .cmp-head .logo-fallback { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--accent); color: #fff; color: oklch(from var(--accent) clamp(0, (.7 - l) * 1000, 1) 0 0) /* black on light accents */; font-weight: 800; }

/* /tarifs: measured results */
.promo-results { margin: 1.5rem 0; }
.promo-results h2 { margin-top: 0; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin-bottom: .75rem; }
.pr-grid > div { display: flex; flex-direction: column; gap: .15rem; }
.pr-num { font-size: 2rem; color: var(--green); line-height: 1.1; }
.cat-combos { margin-top: .75rem; }
.cat-hero > div { min-width: 0; }
.cat-hero h1 { overflow-wrap: break-word; }
.tag-filter .tag { max-width: 100%; }
.admin-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-combos { flex-wrap: wrap; overflow: visible; margin: .75rem 0 0; padding: 0; }
  .cat-combos .tag { white-space: normal; }
}

/* Server page: section tabs, links, verified badge, gallery viewer */
.sp-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 16px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tabs a { color: var(--muted); padding: 7px 13px; border-radius: 8px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.sp-tabs a:hover { color: var(--text); text-decoration: none; background: rgba(var(--hl-rgb),.04); }
.sp-tabs a.on { background: var(--surface-2); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent, var(--green)); }
@media (min-width: 861px) { .sp-tabs { position: sticky; top: 72px; z-index: 5; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--surface) 92%, transparent); } }
.server-page [id] { scroll-margin-top: 130px; }
.sp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-links a { display: block; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-weight: 600; }
.sp-links a:hover { text-decoration: none; filter: brightness(1.15); }
.badge-verified { background: rgba(56, 189, 248, .15); color: #7dd3fc; border-color: rgba(56, 189, 248, .4); }
.verified-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #38bdf8; color: #04131c; font-size: .7rem; font-weight: 800; vertical-align: middle; }
.verify-code { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.verify-code code { font-size: 1.15rem; padding: 6px 12px; }
.verify-steps ol { padding-left: 1.2rem; display: grid; gap: 14px; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0,0,0,.9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 10px; object-fit: contain; }
.lightbox button { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 16px; right: 16px; } .lb-prev { left: 16px; top: 50%; } .lb-next { right: 16px; top: 50%; }
.lb-count { position: fixed; bottom: 12px; left: 0; right: 0; text-align: center; color: #ddd; margin: 0; font-size: .9rem; }

/* Advanced search */
.search-adv { margin-bottom: 18px; }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.sa-q { grid-column: 1 / -1; }
.sa-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0; }
.sa-actions { display: flex; align-items: center; gap: 16px; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chips .tag { white-space: normal; gap: 6px; }
.hero-adv { display: inline-block; margin-top: 8px; }

/* Team & history */
.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.team-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.team-list form { margin-left: auto; }
.team-add { align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.team-add label { flex: 1; min-width: min(100%, 220px); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hist-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-details { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; overflow-wrap: anywhere; }
.hist-details del { color: var(--red); opacity: .85; } .hist-details ins { color: var(--green); text-decoration: none; }
.role-chip { font-size: .72rem; }

/* Reviews: trust marks, highlighted team replies, moderation queue */
.badge-voted { background: rgba(69, 209, 124, .12); color: var(--green); border-color: rgba(69, 209, 124, .35); font-size: .68rem; }
.review-reply { border-left-width: 4px; background: color-mix(in srgb, var(--accent) 8%, var(--bg-2)); }
.reply-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reply-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #fff; color: oklch(from var(--accent) clamp(0, (.7 - l) * 1000, 1) 0 0) /* black on light accents */; font-weight: 800; font-size: .75rem; }
.mod-flags { color: var(--warn-ink); }
.status-pending { color: var(--warn-ink); font-weight: 700; }

/* Admin: speed */
.vit { font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.vit-good { color: var(--green); } .vit-needs { color: var(--warn-ink); } .vit-poor { color: var(--red); }
span.vit.vit-good { background: rgba(69,209,124,.12); } span.vit.vit-needs { background: rgba(245,179,1,.12); } span.vit.vit-poor { background: rgba(255,107,107,.12); }
.vit-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: 10px 0 14px; }
.vit-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--line); }
.vit-kpi strong { font-size: 1.5rem; }
.vit-kpi.vit-good { border-left-color: #45d17c; } .vit-kpi.vit-needs { border-left-color: #f5b301; } .vit-kpi.vit-poor { border-left-color: #ff6b6b; }
.vit-kpi.vit-good strong { color: var(--green); } .vit-kpi.vit-needs strong { color: var(--warn-ink); } .vit-kpi.vit-poor strong { color: var(--red); }

/* Studio */
.visual-card img, .studio-strip img { aspect-ratio: 1080 / 1350; object-fit: cover; }
.visual-card img.studio-story, .studio-strip img.studio-story { aspect-ratio: 1080 / 1920; }
.studio-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px; }
.studio-strip a { flex: 0 0 min(42vw, 190px); }
.studio-strip img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.studio-carousel pre.code, .visual-card pre.code { white-space: pre-wrap; }
.studio-pick select { max-width: 100%; }

/* Languages */
.nav-lang { font-weight: 800; font-size: .8rem; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px !important; }
.lang-hint { background: #13233a; border-bottom: 1px solid #25405f; font-size: .9rem; padding: 8px 0; }
.lang-hint .container { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lang-hint a { font-weight: 700; }
.lang-hint .link-btn { margin-left: auto; }

/* Servers like X */
.sim-logo { overflow: hidden; background: var(--accent); color: #fff; color: oklch(from var(--accent) clamp(0, (.7 - l) * 1000, 1) 0 0) /* black on light accents */; font-weight: 800; font-size: 2rem; display: grid; place-items: center; }
.sim-logo img { width: 100%; height: 100%; object-fit: cover; }

/* Recruitment */
.recruit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 14px 0; }
.recruit-card { display: flex; flex-direction: column; gap: 8px; color: inherit; border-top: 3px solid var(--accent, var(--green)); }
.recruit-card:hover { text-decoration: none; border-color: var(--accent, var(--green)); }
.recruit-card h2 { font-size: 1.05rem; margin: 0; }
.rc-head { display: flex; gap: 10px; align-items: center; }
.rc-head > div { display: flex; flex-direction: column; min-width: 0; }
.rc-logo { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--accent, var(--green)); color: #fff; color: oklch(from var(--accent) clamp(0, (.7 - l) * 1000, 1) 0 0) /* black on light accents */; font-weight: 800; }
.recruit-offer .rc-logo { width: 56px; height: 56px; }
.rc-logo img { width: 100%; height: 100%; object-fit: cover; }
.rc-role { align-self: flex-start; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.recruit-offer h1 { margin: 10px 0; }
.recruit-offer h2 { font-size: 1.05rem; margin: 16px 0 6px; }
.application { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.application.app-refused { opacity: .6; }
.app-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-status { font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.app-status.app-accepted { color: var(--green); } .app-status.app-new { color: var(--warn-ink); }
.my-apps ul { margin: 8px 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.badge-recruit { background: rgba(245, 179, 1, .12); color: var(--warn-ink); border-color: rgba(245, 179, 1, .4); }

/* Player referrals */
.invite-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.invite-row code { overflow-wrap: anywhere; font-size: 1rem; padding: 8px 12px; }
.friend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.friend-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.friend-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.friend-bar span { display: block; height: 100%; background: var(--green); }

/* Monthly challenges */
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin: 16px 0; }
.challenge { display: flex; flex-direction: column; gap: 6px; }
.challenge h2 { font-size: 1.05rem; margin: 0; }
.challenge.is-done { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ch-icon { font-size: 2rem; }
.ch-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: auto; }
.ch-bar span { display: block; height: 100%; background: var(--green); }
.month-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.month-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 92px; }
.month-badge span { font-size: 1.8rem; }
.month-badge small { color: var(--muted); }
.ch-mini { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Admin → Démarchage: ready answers to objections, pitch sheet */
.objection { margin-top: 10px; }
.objection summary { cursor: pointer; }
.objection .snippet-head { margin-top: 10px; }
.pitch { margin-top: 22px; }
.pitch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 22px; }
.pitch-grid h3 { margin: 14px 0 6px; font-size: 1rem; }
.pitch-grid ul { margin: 0; padding-left: 18px; }
.pitch-grid li { margin: 4px 0; }

/* ==========================================================================
   Light theme and display preferences (menu « Affichage » in the header).
   The choice is applied before the first paint by a small script in <head>.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9;
  --bg-2: #eceff4;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #e8ecf1;
  --line: #dde3ea;
  --line-2: #c7d0da;
  --text: #121a24;
  --text-2: #2c3644;
  --muted: #505c6c;
  --green: #11803d;
  --green-2: #0d7034;
  --btn-top: #1a9a4c;
  --green-ink: #ffffff;
  --gold: #8a6100;
  --diamond: #0b7f92;
  --red: #c42b2b;
  --blue: #1f5fd1;
  --ok-ink: #0c6631;
  --bad-ink: #b42121;
  --warn-ink: #8a5f00;
  --focus: #0b6b33;
  --gold-line: #d9bf74;
  --chart: #1f9a50;
  --code-ink: #17462d;
  --hl-rgb: 15,23,42;
  --glow: .08; --glow-2: .07; --footer-shade: .04;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 24px -14px rgba(16,24,40,.22);
}
:root[data-theme="light"] .topbar { border-bottom-color: var(--line); }
:root[data-theme="light"] .ad-chip { background: rgba(17,24,39,.78); }
:root[data-theme="light"] .ad-label { border-color: var(--muted); color: var(--muted); }
:root[data-theme="light"] .review-text { color: var(--text-2); }
:root[data-theme="light"] .nav-discord svg { fill: #4752c4; }
:root[data-theme="light"] .flash-info { background: #e8f0fd; border-color: #b4cbf3; color: #1d4a99; }
:root[data-theme="light"] .badge-ed { background: #e3edfc; color: #1d4a99; }
:root[data-theme="light"] .badge-verified { background: #e0f2fe; color: #075985; border-color: #7dd3fc; }
:root[data-theme="light"] .ev-kind.is-live { color: #b42121; }
:root[data-theme="light"] .lang-hint { background: #e6eefb; border-bottom-color: #c5d5ee; }
:root[data-theme="light"] .lang-hint a { color: var(--green-2); }
:root[data-theme="light"] .hero-scene { filter: drop-shadow(0 26px 30px rgba(16,24,40,.22)); }
:root[data-theme="light"] .sp-logo img { box-shadow: 0 14px 26px -14px rgba(16,24,40,.45); }
:root[data-theme="light"] .is-premium .sp-head h1 { text-shadow: 0 1px 16px rgba(255,255,255,.7); }
:root[data-theme="light"] .btn-vote { color: #06130b; }
:root[data-theme="light"] .logo-cube { filter: drop-shadow(0 6px 10px rgba(17,128,61,.25)); }
:root[data-theme="light"] .flash-success { background: #e8f7ee; border-color: #9fd9b5; }
:root[data-theme="light"] .flash-error { background: #fdecec; border-color: #f2b1b1; color: var(--bad-ink); }

/* Larger text (html font-size drives every rem) */
:root[data-text="lg"] { --text-scale: 1.125; }
:root[data-text="xl"] { --text-scale: 1.25; }

/* Stronger contrast */
:root[data-contrast="more"] { --muted: var(--text-2); --line: var(--line-2); }
:root[data-contrast="more"][data-theme="dark"], :root[data-contrast="more"]:not([data-theme]) { --text-2: #f1f5f9; --line-2: #5b6b80; }
:root[data-contrast="more"][data-theme="light"] { --text-2: #121a24; --line-2: #7b8796; --green: #0a6630; --green-2: #085a2a; }
:root[data-contrast="more"] main a:not(.btn):not(.tag):not(.brand):not(.card):not(.rank-tabs a):not(.sp-tabs a), :root[data-contrast="more"] .footer a { text-decoration: underline; text-underline-offset: 3px; }
:root[data-contrast="more"] .card, :root[data-contrast="more"] .srv { border-width: 2px; }

/* Fewer animations: user choice, or the device setting */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Display menu */
.a11y { position: relative; }
.a11y-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; }
.a11y-btn:hover, .a11y-btn[aria-expanded="true"] { color: var(--text); background: rgba(var(--hl-rgb),.06); }
.a11y-btn svg { width: 20px; height: 20px; fill: currentColor; }
.a11y-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow), 0 18px 40px -20px rgba(0,0,0,.45); padding: 14px 16px; }
.a11y-panel h2 { font-size: 1rem; margin: 0 0 10px; }
.a11y-panel fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.a11y-panel legend { font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; padding: 0; }
.seg { display: flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg label { flex: 1; text-align: center; cursor: pointer; font-size: .85rem; padding: 7px 4px; position: relative; }
.seg label + label { border-left: 1px solid var(--line-2); }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.seg label:has(input:checked) { background: var(--green); color: var(--green-ink); font-weight: 700; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.a11y-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; padding: 6px 0; cursor: pointer; }
.a11y-switch input { width: 18px; height: 18px; accent-color: var(--green); }
.a11y-panel .a11y-foot { margin: 6px 0 0; font-size: .8rem; }
@media (max-width: 640px) { .a11y-panel { position: fixed; left: 16px; right: 16px; top: 70px; width: auto; } }

/* Minecraft version pages */
.cat-emoji.ver-chip, .cat-card .cat-emoji.ver-chip { font: 800 1rem/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.cat-faq { margin-top: 26px; }
.cat-faq .qa dt { font-weight: 700; margin-top: 12px; }
.cat-faq .qa dd { margin: 4px 0 0; color: var(--text-2); }
/* Monthly ranking archives */
.archive-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.archive-list li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 14px 18px; }
.archive-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.archive-table td { vertical-align: top; }

/* Server page: IP box (answers "<server> ip" searches at a glance) */
.ip-box { display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; align-items: center; margin: 4px 0 16px; padding: 18px 22px; }
.ip-box h2 { margin: 0 0 8px; font-size: 1.05rem; }
.ip-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.ip-facts dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.ip-facts dd { margin: 2px 0 0; font-weight: 600; }
.ip-how { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) { .ip-box { grid-template-columns: 1fr; } }

/* Monthly vote goal */
.goal { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); max-width: 560px; }
.goal-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .92rem; }
.goal-bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin: 8px 0 6px; }
.goal-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent, var(--green)), color-mix(in srgb, var(--accent, var(--green)) 70%, #fff)); }
.goal.is-reached { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.goal.is-reached .goal-bar span { background: linear-gradient(90deg, #f5c542, #f59e0b); }
.goal p { margin: 0; }

/* Monthly themed awards */
.awards { margin-top: 26px; }
.award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.award { display: flex; gap: 14px; align-items: flex-start; border-top: 3px solid var(--accent); }
.award-icon { font-size: 2rem; line-height: 1; }
.award-name { margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); }
.award-server { margin: 4px 0; font-size: 1.15rem; font-weight: 800; }
.award p.small { margin: 0; }
.badge-award { text-transform: none; }
.newsletter-preview { background: #fff; color: #1b2430; border-radius: 10px; padding: 18px 20px; }

/* "Partenaire" badge (set by the admin): solid sky blue, distinct from the pale blue Verified badge */
.badge-partner { background: #7dd3fc; color: #04263a; border-color: transparent; letter-spacing: .06em; }
a.badge-partner:hover { text-decoration: none; filter: brightness(1.06); }
:root[data-theme="light"] .badge-partner { background: #38bdf8; color: #032536; }
.partner-ctl { display: inline-block; position: relative; }
.partner-ctl > summary { list-style: none; cursor: pointer; }
.partner-ctl > summary::-webkit-details-marker { display: none; }
.partner-pop { position: absolute; right: 0; z-index: 10; width: 280px; margin-top: 6px; padding: 12px; display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow); }
.cmp-head + .badge-partner { margin-top: 6px; }

/* Home: official partners showcase (compact) */
.pt-show { margin: 22px 0 26px; }
.pt-show .section-head { margin-bottom: 10px; }
.pt-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 800 .78rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #7dd3fc; }
.pt-hero { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); border-radius: 16px; overflow: hidden; border: 2px solid #7dd3fc;
  background: linear-gradient(120deg, #0c2a3a 0%, var(--surface) 55%); box-shadow: 0 0 0 5px rgba(125,211,252,.07), 0 24px 48px -30px rgba(56,189,248,.45); }
.pt-art { position: relative; min-height: 210px; background: linear-gradient(135deg, rgba(125,211,252,.25), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px), linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, #1e3a8a), #0e7490 70%, #164e63); background-size: cover; background-position: center; }
.pt-logo { position: absolute; left: 24px; bottom: 22px; width: 88px; height: 88px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; font: 400 1.7rem 'Press Start 2P', monospace; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, #111), #0891b2); border: 3px solid #7dd3fc; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.pt-logo img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pt-ribbon { position: absolute; top: 16px; left: -2px; background: #7dd3fc; color: #04263a; font: 800 .72rem/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px 8px 16px; border-radius: 0 999px 999px 0; }
.pt-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pt-body h3 { font-size: 1.7rem; margin: 0; line-height: 1.1; letter-spacing: -.02em; }
.pt-body h3 a { color: var(--text); }
.pt-note { color: #7dd3fc; font-weight: 700; margin: 0; font-size: .92rem; }
.pt-desc { margin: 0; color: var(--text-2); }
.pt-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-stats { display: flex; gap: 22px; }
.pt-stats strong { display: block; font-size: 1.2rem; color: var(--green); } .pt-stats span { color: var(--muted); font-size: .78rem; }
.pt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.btn-pt { background: #7dd3fc; color: #04263a; box-shadow: 0 10px 24px -12px rgba(125,211,252,.9); }
.pt-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.pt-mini { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(125,211,252,.55); background: linear-gradient(90deg, rgba(125,211,252,.10), var(--surface)); color: var(--text); min-width: 0; }
.pt-mini:hover { text-decoration: none; border-color: #7dd3fc; }
.pt-mini .lg { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; font: 400 .9rem 'Press Start 2P', monospace; color: #fff; background: color-mix(in srgb, var(--accent) 70%, #111); border: 2px solid #7dd3fc; flex: none; }
.pt-mini .lg img { width: 100%; height: 100%; object-fit: cover; }
.pt-mini .muted { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="light"] .pt-hero { background: linear-gradient(120deg, #e0f2fe 0%, var(--surface) 55%); border-color: #38bdf8; }
:root[data-theme="light"] .pt-kicker, :root[data-theme="light"] .pt-note { color: #0369a1; }
:root[data-theme="light"] .pt-mini { border-color: #7dd3fc; background: linear-gradient(90deg, #e0f2fe, var(--surface)); }
@media (max-width: 760px) { .pt-hero { grid-template-columns: 1fr; } .pt-art { min-height: 130px; } .pt-logo { width: 72px; height: 72px; font-size: 1.3rem; left: 18px; bottom: -26px; } .pt-body { padding: 36px 18px 18px; } .pt-body h3 { font-size: 1.5rem; } }

/* Home: events live now / starting soon */
.live-events { display: grid; gap: 8px; margin: 18px 0 0; }
.le-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.le-item:hover { text-decoration: none; border-color: var(--line-2); }
.le-item.is-live { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--red) 12%, var(--surface)), var(--surface) 60%); }
.le-state { font: 800 .76rem/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.is-live .le-state { color: var(--red); animation: le-blink 1.6s ease-in-out infinite; }
@keyframes le-blink { 50% { opacity: .55; } }
.le-text { flex: 1; min-width: 200px; }
.le-go { color: var(--green); font-weight: 700; font-size: .9rem; }

/* "What the server offers" chips (server page) and form checkboxes */
.sp-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: -6px 0 14px; }
.sp-feats a { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); color: var(--text); }
.sp-feats a:hover { text-decoration: none; border-color: var(--green); }
.feature-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin-bottom: 8px; }
.anomaly-card { margin-top: 16px; border-left: 4px solid #f0a020; }
.anomaly-card h2 { margin: 0 0 8px; font-size: 1.05rem; }
.anomaly-card ul { margin: 0; padding-left: 18px; }

/* Page completeness (Mes serveurs, edit page) */
.complete { margin: 10px 0; }
.complete-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .88rem; font-weight: 700; }
.complete-head h2 { margin: 0; font-size: 1.05rem; }
.complete .goal-bar, .complete-box .goal-bar { margin: 6px 0 0; height: 8px; }
.complete .goal-bar span, .complete-box .goal-bar span { background: linear-gradient(90deg, var(--green), var(--diamond)); }
.complete-box { margin-bottom: 16px; }
.complete-list { columns: 2 260px; margin: 12px 0 0; padding-left: 18px; }
.complete-list li { margin: 3px 0; break-inside: avoid; }

/* Trust score (server page sidebar) */
.trust h3 { margin-top: 0; }
.trust-score { display: flex; align-items: baseline; gap: 4px; }
.trust-score strong { font-size: 2rem; line-height: 1; }
.trust-score > span:not(.trust-level) { color: var(--muted); }
.trust-level { margin-left: auto; font-weight: 800; font-size: .85rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); }
.trust-high .trust-level { background: color-mix(in srgb, var(--green) 18%, var(--surface)); color: var(--green); }
.trust-good .trust-level { background: color-mix(in srgb, var(--blue) 16%, var(--surface)); color: var(--blue); }
.trust .goal-bar { margin: 8px 0; height: 8px; }
.trust-high .goal-bar span { background: var(--green); } .trust-good .goal-bar span { background: var(--blue); } .trust-low .goal-bar span { background: var(--muted); }
.trust details summary { cursor: pointer; color: var(--muted); }
.trust-parts { list-style: none; padding: 0; margin: 8px 0; }
.trust-parts li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--line); }

/* "Je cherche des potes" */
.lfg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; margin-top: 18px; align-items: start; }
.lfg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lfg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lfg-ago { margin-left: auto; }
.lfg-msg { margin: 8px 0; }
.lfg-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.lfg-form { position: sticky; top: 84px; }
.lfg-form h2 { margin-top: 0; font-size: 1.1rem; }
.row-hidden { opacity: .65; }
@media (max-width: 900px) { .lfg-grid { grid-template-columns: 1fr; } .lfg-form { position: static; order: -1; } }

/* Site-wide announcement (Admin → Réglages → Annonce du site) */
.site-announce { font-size: .92rem; border-bottom: 1px solid var(--line); }
.site-announce .container { display: flex; align-items: center; gap: 10px; padding-top: 9px; padding-bottom: 9px; }
.site-announce .container > span { flex: 1; }
.site-announce-info { background: color-mix(in srgb, var(--blue) 14%, var(--bg)); }
.site-announce-success { background: color-mix(in srgb, var(--green) 14%, var(--bg)); }
.site-announce-warn { background: color-mix(in srgb, #f0a020 18%, var(--bg)); }
.site-announce a { font-weight: 700; white-space: nowrap; }
.admin-notes { margin: 0 0 14px; border-left: 4px solid var(--gold); }
.admin-notes summary { cursor: pointer; font-weight: 700; }
.admin-notes ul { list-style: none; padding: 0; margin: 10px 0; }
.admin-notes li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.admin-notes li p { margin: 2px 0; white-space: pre-wrap; }
.votifier-test { margin: 6px 0 4px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; }
.votifier-test p { margin: 0 0 8px; }
.vt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vt-row input { flex: 1 1 180px; }
.join-steps h2 { margin-top: 26px; }
.join-steps ol li, .join-steps ul li { margin: 6px 0; }

/* Free monthly pass */
.pass-now { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.pass-level { display: grid; justify-items: center; padding: 10px 18px; border-radius: 14px; background: var(--surface-2); min-width: 110px; }
.pass-level strong { font-size: 2.6rem; line-height: 1; color: var(--green); }
.pass-xp .goal-bar { height: 10px; margin: 8px 0; }
.pass-src { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pass-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pass-how .card { display: grid; gap: 4px; }
.pass-how strong { font-size: 1.3rem; color: var(--green); }
.pass-track { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pass-step { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); opacity: .7; }
.pass-step.is-reached, .pass-step.is-got { opacity: 1; }
.pass-step.is-got { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.pass-lvl { font: 800 .72rem/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pass-ic { font-size: 1.8rem; }
.pass-name { font-weight: 700; font-size: .92rem; }
.pass-title { margin: -6px 0 6px; font-weight: 700; color: var(--gold); }
/* cosmetics on profiles */
.profile-avatar.frame-bronze { box-shadow: 0 0 0 4px #b86b2d; }
.profile-avatar.frame-silver { box-shadow: 0 0 0 4px #cfd6df, 0 0 18px rgba(207,214,223,.5); }
.profile-avatar.frame-gold { box-shadow: 0 0 0 4px #f5c542, 0 0 24px rgba(245,197,66,.6); }
h1.name-emerald { color: #34d399; } h1.name-diamond { color: #5ee0f0; }
h1.name-gold { background: linear-gradient(90deg, #ffe07a, #e9a916); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] h1.name-emerald { color: #047857; } :root[data-theme="light"] h1.name-diamond { color: #0e7490; }
@media (max-width: 600px) { .pass-now { grid-template-columns: 1fr; } }
/* vote rewards: v1 key, API key, docs */
.vote-more { margin: 4px 0 10px; }
.vote-more summary { cursor: pointer; font-size: .9rem; color: var(--muted); }
.vote-more textarea { font: 500 .8rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.api-key-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.api-key-row label { flex: 1 1 280px; margin: 0; }
.api-key-row p { flex: 1 1 200px; margin: 0; }
input.mono { font: 500 .85rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.api-doc .api-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0; }
.api-doc .api-choices a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.api-doc .api-choices a:hover { border-color: var(--accent, #45d17c); }
.api-doc pre.code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
.api-doc section.card { margin-bottom: 16px; }
/* admin: email to server owners */
.owner-news-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; }
.owner-news-stats .card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.owner-news-stats strong { font-size: 1.5rem; }
.owner-news-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .owner-news-grid { grid-template-columns: 1fr; } }
.owner-news-grid textarea { font-size: .9rem; }
.inline-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.owner-news-send { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.mail-preview { background: #fff; color: #1b2430; border-radius: 10px; padding: 18px 20px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.owner-news-live { margin-bottom: 16px; border-color: var(--green); }
/* explanatory text at the bottom of list pages */
.seo-text { margin-top: 28px; margin-bottom: 8px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); max-width: 860px; }
.seo-text h2 { font-size: 1.1rem; color: var(--text); margin: 0 0 10px; }
.seo-text p { line-height: 1.65; margin: 0 0 10px; font-size: .95rem; }
.seo-text strong { color: var(--text); }
/* "IP serveur Minecraft" page */
.ip-table td { vertical-align: middle; }
.ip-rank { font-weight: 800; color: var(--muted); width: 40px; }
.ip-name a { font-weight: 700; display: block; }
.ip-table .ip-copy { font: 600 .9rem ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 10px; }
.ip-howto { margin: 20px 0; }
.ip-howto ol { padding-left: 20px; margin: 6px 0 0; }
.ip-faq { margin: 20px 0; display: grid; gap: 10px; }
.ip-faq summary { cursor: pointer; font-weight: 700; }
.ip-faq details p { margin: 10px 0 0; }
@media (max-width: 640px) {
  .ip-table thead { display: none; }
  .ip-table, .ip-table tbody, .ip-table tr, .ip-table td { display: block; width: 100%; }
  .ip-table tr { display: grid; grid-template-columns: 36px 1fr; gap: 4px 10px; padding: 12px; border-bottom: 1px solid var(--line); }
  .ip-table td { padding: 0; border: 0; }
  .ip-table td.ip-rank { grid-row: span 4; }
}
/* public stats page */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 18px 0; }
.stat-big { display: flex; flex-direction: column; gap: 2px; padding: 18px; }
.stat-big strong { font-size: 2rem; line-height: 1.1; color: var(--green); }
.stat-big span { font-weight: 700; }
.stats-page section.card { margin-bottom: 16px; }
.stat-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stat-tags li { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; }
.stat-tags .bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.stat-tags .bar span { display: block; height: 100%; background: var(--green); border-radius: 99px; }
@media (max-width: 520px) { .stat-tags li { grid-template-columns: 90px 1fr auto; gap: 8px; } }
/* server news */
.news-mini { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.news-mini li p { margin: 2px 0 0; color: var(--muted); }
.news-page .news-list { display: grid; gap: 12px; margin: 16px 0; }
.news-item h2 { font-size: 1.15rem; margin: 6px 0 2px; }
.news-item h2 a { color: var(--text); }
.news-item p { margin: 6px 0; }
.news-server { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.news-server img { border-radius: 8px; object-fit: cover; }
.news-article { border-top: 4px solid var(--accent, var(--green)); padding: 22px 24px; }
.news-article h1 { margin: 12px 0 4px; font-size: clamp(1.4rem, 3vw, 2rem); }
.news-article .prose { margin-top: 16px; }
.news-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.news-edit h3 { margin: 4px 0 8px; }
.news-meta .danger { color: var(--red, #f06565); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; }
/* server page: links to every listing page the server appears on */
.explore h2 { font-size: 1.05rem; margin: 0 0 10px; }
.explore-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.explore-links a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 99px; font-size: .86rem; color: var(--text); text-decoration: none; }
.explore-links a:hover { border-color: var(--green); color: var(--green); }
/* glossary */
.lex-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.lex-letters a { min-width: 34px; text-align: center; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 8px; font-weight: 800; color: var(--text); text-decoration: none; }
.lex-letters a:hover { border-color: var(--green); color: var(--green); }
.lex-list { margin: 0; }
.lex-letter { font-size: 1.3rem; color: var(--green); margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.lex-item { padding: 10px 0; scroll-margin-top: 80px; }
.lex-item dt { font-weight: 800; font-size: 1.02rem; }
.lex-item dd { margin: 4px 0 0; color: var(--muted); line-height: 1.6; }
.lex-item:target { background: color-mix(in srgb, var(--green) 10%, transparent); border-radius: 8px; padding-left: 10px; }
/* outreach: guided session */
.session-start { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 12px 0 16px; }
.session-start p { margin: 4px 0 0; max-width: 720px; }
.session-start.is-due { border-color: var(--green); }
.session-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0; border-color: var(--green); padding: 10px 14px; }
.auto-settings { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; display: grid; gap: 10px; }
.auto-settings legend { font-weight: 800; padding: 0 6px; }
/* vote form: honeypot (invisible to people, filled by bots) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.guide-faq { margin-top: 28px; display: grid; gap: 10px; }
.guide-faq summary { cursor: pointer; font-weight: 700; }
.guide-faq details p { margin: 10px 0 0; }

/* Admin → Positions Google */
.gsc-up { color: var(--ok-ink, #1f8a4c); font-weight: 700; white-space: nowrap; }
.gsc-down { color: #d9534f; font-weight: 700; white-space: nowrap; }
.gsc-new { font-size: .75rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(94,224,240,.18); }
.gsc-moves { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Public page of the Discord bot */
.bot-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; margin: 12px 0 28px; }
.bot-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.dc-preview { background: #313338; border-radius: 16px; padding: 16px; display: grid; gap: 14px; color: #dbdee1; font-size: .92rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.dc-msg { display: flex; gap: 12px; } .dc-msg img { border-radius: 50%; flex: none; } .dc-msg p { margin: 0 0 4px; }
.dc-name { font-weight: 700; color: #fff; } .dc-tag { background: #5865f2; color: #fff; font-size: .62rem; padding: 1px 4px; border-radius: 3px; vertical-align: middle; }
.dc-time { color: #949ba4; font-weight: 400; font-size: .75rem; }
.dc-embed { background: #2b2d31; border-left: 4px solid #45d17c; border-radius: 4px; padding: 10px 12px; margin: 4px 0 6px; }
.dc-title { font-weight: 700; color: #fff; } .dc-fields { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; } .dc-fields b { display: block; color: #fff; font-size: .78rem; }
.dc-list { display: grid; gap: 2px; } .dc-foot { color: #949ba4; font-size: .75rem; margin-top: 6px !important; }
.dc-btn { display: inline-block; background: #4e5058; color: #fff; padding: 5px 14px; border-radius: 4px; font-size: .85rem; font-weight: 600; }
.bot-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.bot-features h2 { font-size: 1.05rem; margin: 6px 0 4px; } .bf-icon { font-size: 1.6rem; }
.bot-steps li { margin: 8px 0; }
@media (max-width: 860px) { .bot-hero { grid-template-columns: 1fr; } }
/* Partner grade page */
.pg-kicker { margin: 0 0 6px; }
.pg-preview { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 22px; border-radius: 16px; border: 1.5px solid rgba(125,211,252,.55); background: linear-gradient(135deg, rgba(125,211,252,.12), var(--surface)); }
.pg-preview img { max-width: 100%; height: auto; }
.pg-h { margin: 8px 0 12px; }
.pg-page .bot-features h3 { font-size: 1.05rem; margin: 6px 0 4px; }
.pg-fair { margin-top: 22px; border-left: 4px solid #7dd3fc; }
.pg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.pg-mine { margin-top: 26px; display: grid; gap: 14px; }
.pg-mine > h2 { margin: 0; }
.pg-srv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-srv-head h3 { margin: 0; }
.pg-state { font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.pg-state.pg-partner { background: #7dd3fc; color: #04263a; border-color: transparent; }
.pg-state.pg-ready { color: var(--green); border-color: var(--green); }
.pg-crit { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.pg-crit li.ko { color: var(--text); } .pg-crit li.opt { opacity: .8; }
.pg-form textarea { width: 100%; }
.pg-current { margin-top: 26px; }
.pg-app { border-top: 1px solid var(--line); padding: 14px 0; }
.pg-app blockquote { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--surface-2); border-radius: 6px; white-space: pre-wrap; }
.pg-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .pg-cols, .pg-decide { grid-template-columns: 1fr; } }
.pricing-partner { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin: 22px 0; border-left: 4px solid #7dd3fc; }
.pricing-partner h2 { font-size: 1.15rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 0; }
.pricing-partner p { margin: 6px 0; }
.pricing-partner .btn { flex: none; }
.home-partner-line { margin: 8px 0 0; opacity: .95; }
@media (max-width: 760px) { .pricing-partner { flex-direction: column; align-items: flex-start; } }
.mail-banner { display: block; width: 100%; max-width: 600px; height: auto; border-radius: 10px; margin: 0 0 14px; }
/* Referral rewards */
.ref-track { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ref-track li { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); opacity: .75; }
.ref-track li.is-got { opacity: 1; border-color: var(--green); }
.ref-n { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .ref-ic { font-size: 1.6rem; } .ref-name { font-weight: 700; }
.profile-avatar.frame-emerald { box-shadow: 0 0 0 4px #34d399, 0 0 20px rgba(52,211,153,.55); }
.profile-avatar.frame-legend { box-shadow: 0 0 0 3px #f472b6, 0 0 0 6px #facc15, 0 0 0 9px #5ee0f0, 0 0 28px rgba(94,224,240,.55); }
h1.name-aurora { background: linear-gradient(90deg, #45d17c, #5ee0f0, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.invite-from { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: .85rem; }
.invite-perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.invite-perks h2 { font-size: 1rem; margin: 6px 0 4px; }
.win-recap { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.win-recap a { display: grid; gap: 8px; justify-items: center; }
.win-recap img { border-radius: 10px; border: 1px solid var(--line); height: 240px; width: auto; }
.win-iframe { border: 0; max-width: 100%; display: block; margin: 8px 0; }
/* Creator kit */
.ck-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 8px; }
.ck-figs .card { display: grid; gap: 2px; text-align: center; } .ck-figs strong { font-size: 1.7rem; color: var(--green); }
.ck-page > .card, .ck-page > section.card { margin-top: 18px; }
.ck-form { max-width: 520px; }
.ck-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.ck-stats div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ck-stats strong { font-size: 1.5rem; }
.ck-visuals, .ck-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ck-visuals figure, .ck-logos figure { margin: 0; display: grid; gap: 8px; }
.ck-visuals img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.ck-visuals figcaption, .ck-logos figcaption { display: grid; gap: 2px; font-size: .9rem; }
.ck-logo { height: 120px; border-radius: 10px; display: grid; place-items: center; padding: 12px; border: 1px solid var(--line); }
.ck-logo img { max-width: 100%; max-height: 96px; } .ck-dark { background: #0b0f14; } .ck-light { background: #f5f7fa; }
.ck-palette { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ck-palette li { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.ck-palette li span { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); }
.ck-c1 { background: #45d17c; } .ck-c2 { background: #5ee0f0; } .ck-c3 { background: #0b0f14; } .ck-c4 { background: #e9eef4; }
/* Hosting comparison */
.hosts-disclosure { margin: 0 0 16px; }
.hosts-table td { vertical-align: middle; }
.hosts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.host-card { display: flex; flex-direction: column; gap: 8px; }
.host-card .btn:last-child { margin-top: auto; align-self: flex-start; }
.host-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .host-head h2 { margin: 0; font-size: 1.2rem; }
.host-facts { display: flex; gap: 18px; margin: 0; } .host-facts dt { color: var(--muted); font-size: .8rem; } .host-facts dd { margin: 0; font-weight: 700; }
.host-promo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); font-size: .9rem; }
.host-promo code { font-weight: 800; }
.partner-promo code { font-weight: 800; }
/* Scheduled posts */
.sched-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border: 1px dashed var(--line); }
.sched-pick legend { font-weight: 600; font-size: .92rem; padding: 0 6px; }
.sched-pick input[type=datetime-local] { width: auto; }
.sched-pick .muted { flex-basis: 100%; }
.sched-list { margin: 18px 0; }
.sched-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.sched-act { display: flex; gap: 8px; align-items: center; }
/* My votes */
.mv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.mv-stats .card { display: grid; gap: 2px; text-align: center; } .mv-stats strong { font-size: 1.6rem; color: var(--green); }
.mv-scroll { overflow-x: auto; padding-bottom: 6px; }
.mv-months { display: grid; grid-template-columns: repeat(53, minmax(9px, 1fr)); column-gap: 3px; font-size: .72rem; color: var(--muted); min-width: 640px; height: 16px; }
.mv-months span { white-space: nowrap; }
.mv-cal { display: grid; grid-template-columns: repeat(53, minmax(9px, 1fr)); column-gap: 3px; min-width: 640px; }
.mv-week { display: grid; grid-template-rows: repeat(7, auto); row-gap: 3px; }
.mv-week .mv-d { width: 100%; height: auto; aspect-ratio: 1; }
.mv-d { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
.mv-d.l1 { background: #1d5e3a; border-color: transparent; } .mv-d.l2 { background: #2b8a52; border-color: transparent; }
.mv-d.l3 { background: #3cb96c; border-color: transparent; } .mv-d.l4 { background: #5ee08e; border-color: transparent; }
.mv-d.fut { visibility: hidden; }
.mv-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin: 8px 0 0; }
:root[data-theme="light"] .mv-d.l1 { background: #b7ecc9; } :root[data-theme="light"] .mv-d.l2 { background: #7bd99d; } :root[data-theme="light"] .mv-d.l3 { background: #3cb96c; } :root[data-theme="light"] .mv-d.l4 { background: #1f8a4c; }
.mv-servers { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .mv-servers li span.muted { margin-left: 8px; }
.mv-detail { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .mv-detail li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mv-detail strong { font-size: .92rem; } .mv-detail strong::first-letter { text-transform: uppercase; }
.mv-mnav { margin: 0 0 10px; }
/* Random server */
.random-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 18%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--line); }
.random-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; font-weight: 700; }
.badge-anniv { background: linear-gradient(90deg, #f9a8d4, #fcd34d); color: #3b1d00; border-color: transparent; }
/* Loyalty badges */
.loyal-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 18px; }
.loyal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: .92rem; }
a.loyal-chip:hover { text-decoration: none; border-color: var(--green); }
.loyal-ic { font-size: .9em; }
/* Launch checklist */
.launch { margin: 10px 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 6%, var(--surface)); }
.launch-steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 5px; font-size: .9rem; }
.launch-steps li { display: flex; gap: 8px; align-items: center; }
.launch-steps li.ok { opacity: .7; } .launch-steps li.next a { font-weight: 700; }
.l-day { flex: none; width: 30px; font-size: .75rem; font-weight: 800; color: var(--muted); }
.abandon-box { margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #b8860b; background: color-mix(in srgb, #f5c542 10%, var(--surface)); }
/* Weekly quests */
.quests { margin: 22px 0; }
.quest-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.quest { display: flex; gap: 12px; align-items: center; } .quest.is-done { border-color: var(--green); }
.q-body { display: grid; gap: 6px; flex: 1; }
.sp-plugins { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
/* Polish: badges keep their size inside titles, live block links */
.srv-title a.badge, .sp-badges a.badge { font-size: .7rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2; }
.live-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 8px; }
/* Vote page */
.vote-card { border-top: 4px solid var(--accent, var(--green)); padding-top: 0; overflow: hidden; }
.vote-head { margin: 0 -22px 14px; padding: 16px 22px 6px; background: radial-gradient(500px 160px at 20% 0%, color-mix(in srgb, var(--accent, #45d17c) 28%, transparent), transparent); background-size: cover; background-position: center; }
.vote-back { display: inline-block; margin-bottom: 10px; }
.vote-id { display: flex; gap: 16px; align-items: center; }
.vote-id h1 { margin: 0 0 6px; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.vote-logo { flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; font: 400 1.3rem 'Press Start 2P', monospace; color: #fff; background: color-mix(in srgb, var(--accent, #45d17c) 70%, #111); border: 2px solid color-mix(in srgb, var(--accent, #45d17c) 60%, #fff); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.vote-logo img { width: 100%; height: 100%; object-fit: cover; }
.vote-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vote-reward { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 12px 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--green) 50%, var(--line)); background: color-mix(in srgb, var(--green) 8%, var(--surface)); font-size: 1.2rem; }
.vote-reward > span { font-size: .95rem; }
/* Mobile header: one line (logo, quick action, menu button), links in a drop-down panel */
.nav-toggle, .nav-quick { display: none; }
@media (max-width: 760px) {
  .topbar { position: sticky; }
  .nav { flex-wrap: nowrap; position: relative; min-height: 58px; gap: 10px; }
  .brand { margin-right: auto; }
  .nav-quick { display: inline-flex; align-items: center; }
  .nav-bell-quick { position: relative; font-size: 1.2rem; padding: 6px; text-decoration: none; }
  .nq-dot { position: absolute; top: 0; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #e5484d; color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }
  .nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 1.25rem; cursor: pointer; }
  .links { display: none; position: absolute; top: 100%; left: -20px; right: -20px; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 20px 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0,0,0,.35); }
  .topbar.nav-open .links { display: flex; }
  .links > a:not(.btn), .links .link-btn { padding: 11px 10px; border-radius: 8px; }
  .links > .btn { margin-top: 6px; justify-content: center; }
  .links .a11y, .links .nav-lang { align-self: flex-start; }
  .links .nav-lang { margin-top: 6px; }
  .hero-art { display: none; }
}

/* Owner stats: this month vs last month */
.month-cmp { margin: 18px 0; }
.month-cmp th[scope="row"] { text-align: left; font-weight: 600; }
.delta { font-weight: 700; white-space: nowrap; }
.delta-up { color: var(--ok-ink); }
.delta-down { color: var(--bad-ink); }

/* Seasons calendar */
.badge-season { background: rgba(94,224,240,.14); color: var(--diamond); border-color: rgba(94,224,240,.35); }
.season-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 4px; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(94,224,240,.08); border: 1px solid rgba(94,224,240,.3); max-width: 720px; }
.season-box.season-live { background: rgba(69,209,124,.08); border-color: rgba(69,209,124,.35); }
.season-box .season-ico { font-size: 1.15rem; }
.season-box time { font-weight: 700; color: var(--diamond); white-space: nowrap; }
.season-box a { margin-left: auto; }
.season-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.season-fields { margin-top: 18px; }
.season-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.season-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; }
.season-card .srv-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.season-when { text-align: right; }
.season-when time { display: block; font-weight: 800; font-size: 1.05rem; color: var(--diamond); }
.season-card h3 { margin: 0 0 2px; font-size: 1.05rem; }
.season-card p { margin: 0; }
@media (max-width: 760px) {
  .season-grid { grid-template-columns: 1fr; }
  .season-card { grid-template-columns: 44px 1fr; }
  .season-card .srv-logo { width: 44px; height: 44px; }
  .season-when { grid-column: 1 / -1; text-align: left; }
  .season-box a { margin-left: 0; }
}

/* "X vs Y" comparisons */
.vs-hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 18px 0 8px; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent, var(--green)); color: var(--text); text-align: center; }
.vs-side img, .vs-side .logo-fallback { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; }
.vs-side strong { font-size: 1.15rem; }
.vs-mark { font-family: var(--pixel); font-size: 1.1rem; color: var(--gold); }
.vs-mark.small { font-size: .7rem; margin: 0 6px; }
.vs-title { font-size: 1.5rem; margin: 14px 0 6px; }
.vs-verdict { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.vs-verdict li { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vs-verdict li:last-child { border-bottom: 0; }
.vs-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.vs-list a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text); }
.vs-list a .muted { flex-basis: 100%; }
@media (max-width: 760px) {
  .vs-hero { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .vs-side { padding: 12px 8px; }
  .vs-side img, .vs-side .logo-fallback { width: 52px; height: 52px; }
  .vs-side strong { font-size: 1rem; word-break: break-word; }
  .vs-verdict li { grid-template-columns: 1fr; gap: 2px; }
}
.mc-emoji { font-size: 2.6rem; line-height: 1; }
.mc-who { margin: 18px 0; }
.mc-who h2 { font-size: 1.1rem; }
.drop-tips { margin: 18px 0; border-color: rgba(240,101,101,.4); background: linear-gradient(180deg, rgba(240,101,101,.06), transparent); }
.season-stats { margin: 18px 0; }
.season-figs { margin: 6px 0 0; }
.season-figs .stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
.badge-fresh { background: rgba(124,178,255,.14); color: var(--blue); border-color: rgba(124,178,255,.35); }
.uptodate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(124,178,255,.08); border: 1px dashed rgba(124,178,255,.4); }
.uptodate small { flex-basis: 100%; }

/* What's new */
.wn-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.wn-list h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.wn-list p { margin: 0; }
.wn-meta { display: flex; align-items: center; gap: 6px; }
.wn-players { background: rgba(69,209,124,.12); color: var(--ok-ink); }
.wn-owners { background: rgba(245,197,66,.14); color: var(--gold); }
.wn-both { background: rgba(94,224,240,.12); color: var(--diamond); }
.mc-top { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.mc-top li { display: grid; grid-template-columns: auto 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; }
.mc-top img, .mc-top .logo-fallback { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; }
.mc-rank { font-weight: 800; color: var(--muted); }
.mc-name { display: flex; flex-direction: column; min-width: 0; }
.mc-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-votes { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
@media (max-width: 760px) { .season-figs { grid-template-columns: 1fr 1fr; } .season-figs .stat strong { font-size: 1.3rem; } }
.mc-top li.card { margin: 0; }
.sort-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sort-tabs a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-size: .88rem; }
.sort-tabs a.on { background: rgba(69,209,124,.12); border-color: rgba(69,209,124,.45); color: var(--ok-ink); font-weight: 600; }

/* Quick finder */
.qf-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.qf-form legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.qf-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--green-ink); font-size: .85rem; }
.qf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.qf-chips label { cursor: pointer; }
.qf-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qf-chips span { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: .9rem; }
.qf-chips input:checked + span { background: rgba(69,209,124,.15); border-color: var(--green); color: var(--ok-ink); font-weight: 600; }
.qf-chips input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.mod-notes { margin-top: 8px; }
.mod-note { margin: 4px 0; padding: 6px 8px; border-left: 3px solid var(--gold); background: rgba(245,197,66,.07); border-radius: 4px; }
.mod-note-form { display: flex; gap: 6px; margin-top: 6px; }
.mod-note-form input { flex: 1; min-width: 0; padding: 6px 8px; font-size: .85rem; }
.mod-note .link-btn { background: none; border: 0; padding: 0 4px; cursor: pointer; }
.vc-chip { font-size: 1.4rem; padding: 10px 14px; }

/* Records */
.rec-grid { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rec-card { display: flex; flex-direction: column; gap: 4px; }
.rec-ico { font-size: 1.6rem; }
.rec-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; background: linear-gradient(90deg, var(--green), var(--diamond)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rec-who { font-weight: 600; }
.vt-status { padding: 8px 10px; border-radius: 8px; margin: 0 0 8px; }
.vt-status.ok { background: rgba(69,209,124,.1); color: var(--ok-ink); }
.vt-status.ko { background: rgba(240,101,101,.1); color: var(--bad-ink); }
.relay-steps li { margin: 6px 0; } .relay-url { display: flex; gap: 6px; margin-top: 6px; } .relay-url input { flex: 1; min-width: 0; }

/* Profile photos */
.profile-avatar { overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-img { object-fit: cover; padding: 0; background: var(--surface-3); }
.avatar-card { margin: 14px 0; }
.avatar-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.avatar-form input[type=file] { max-width: 100%; }
.adm-avatar { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; vertical-align: middle; }
.adm-user-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.adm-user-tools input[type=file] { max-width: 180px; font-size: .78rem; }
.adm-user-tools input[name=username], .adm-user-tools input[name=mc_username] { width: 130px; padding: 5px 8px; font-size: .82rem; }
.adm-user-more { margin-top: 6px; } .adm-user-more summary { cursor: pointer; color: var(--muted); }
.admin-tools { margin: 14px 0; border-color: rgba(245,197,66,.45); }
.admin-tools > summary { cursor: pointer; font-weight: 700; }
.admin-tools-links, .admin-tools-forms { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0; align-items: center; }
.admin-tools-forms input[name=username], .admin-tools-forms input[name=reason] { min-width: 220px; }
.pp-reviews { list-style: none; padding: 0; display: grid; gap: 10px; } .pp-reviews p { margin: 6px 0 0; }
.friend-servers { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.friend-servers li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.friend-servers img, .friend-servers .logo-fallback { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; }
.friend-servers li > span { display: flex; flex-direction: column; min-width: 0; }
.season-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Commands glossary */
.cmd-grid { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cmd-card { display: flex; flex-direction: column; gap: 4px; color: var(--text); height: 100%; }
.cmd-name, .cmd-hero h1 code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--green); font-weight: 800; }
.cmd-name { font-size: 1.15rem; }
.cmd-hero h1 { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.cmd-hero h1 span { font-size: .7em; color: var(--text-2); font-weight: 600; }
.cmd-syntax { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.cmd-syntax code, .cmd-examples code { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--surface-3); }
.cmd-examples dt { margin-top: 8px; }
.cmd-examples dd { margin: 4px 0 0 0; color: var(--text-2); }
.cmd-who.cmd-op { background: rgba(240,101,101,.12); color: var(--bad-ink); }
.cmd-who.cmd-all { background: rgba(69,209,124,.12); color: var(--ok-ink); }
/* Automatic translation of server pages */
.tr-note { display: inline-flex; gap: .4rem; align-items: center; padding: .25rem .7rem; border-radius: 999px; background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .3); color: var(--text); margin: 0 0 .8rem; }
.tr-original { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.tr-original summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.tr-original > div { margin-top: .8rem; opacity: .9; }
/* Visibilité Google */
.vis-head { display: flex; gap: 22px; align-items: center; }
.vis-head h2 { margin: 0 0 6px; font-size: 1.15rem; }
.vis-score { --c: var(--green); flex: none; width: 110px; height: 110px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(closest-side, var(--surface) 78%, transparent 80% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); }
.vis-score strong { font-size: 2rem; line-height: 1; } .vis-score span { font-size: .8rem; color: var(--muted); }
.vis-mid { --c: var(--gold); } .vis-low { --c: var(--red); }
.serp { display: flex; flex-direction: column; gap: 3px; background: #fff; color: #202124; border-radius: 10px; padding: 16px 18px; margin: 6px 0 10px; font-family: Arial, sans-serif; max-width: 650px; }
.serp-url { font-size: .82rem; color: #4d5156; overflow-wrap: anywhere; } .serp-title { font-size: 1.2rem; color: #1a0dab; line-height: 1.3; }
.serp-stars { color: #e7711b; font-size: .85rem; } .serp-stars span { color: #70757a; } .serp-desc { font-size: .9rem; color: #4d5156; line-height: 1.45; overflow-wrap: anywhere; }
.vis-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.vis-list li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .vis-list li:first-child { border-top: 0; }
.vis-list p { margin: 4px 0 0; } .vis-ico { flex: none; } .vis-advice { color: var(--text-2); }
@media (max-width: 560px) { .vis-head { flex-direction: column; align-items: flex-start; } }
/* Servers recruiting */
.rc-offers { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rc-offers a { display: block; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: inherit; }
.rc-offers a:hover { text-decoration: none; background: var(--surface-3); }
.recruit-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; margin: 18px 0; }
.recruit-info h2 { font-size: 1.1rem; margin-top: 0; }
/* Ce soir, on joue où ? */
.tonight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; margin: 16px 0; }
.tonight-grid h2 { font-size: 1.1rem; margin: 0 0 10px; }
.tn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tn-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .tn-list li:first-child { border-top: 0; }
.tn-pos { width: 22px; text-align: center; font-weight: 800; color: var(--muted); flex: none; }
.tn-logo { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--accent, var(--surface-3)); font-weight: 800; }
.tn-logo img { width: 100%; height: 100%; object-fit: cover; }
.tn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tn-main a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-players { text-align: right; display: flex; flex-direction: column; flex: none; } .tn-players strong { color: var(--green); }
.tn-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tn-events li { display: flex; gap: 10px; align-items: flex-start; } .tn-events li > div { display: flex; flex-direction: column; min-width: 0; }
.tn-events .ev-kind { flex: none; white-space: nowrap; }
/* Swipe */
.swipe-wrap { max-width: 420px; margin: 0 auto; }
.swipe-progress { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-bottom: 14px; }
.swipe-progress span { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s; }
.swipe-stack { position: relative; height: 470px; }
.swipe-loading { text-align: center; padding-top: 180px; }
.swipe-card { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.35); display: flex; flex-direction: column; touch-action: pan-y; user-select: none; cursor: grab; transition: transform .3s ease, opacity .3s ease; }
.swipe-card.dragging { transition: none; cursor: grabbing; }
.swipe-card:not(:last-child) { transform: scale(.95) translateY(14px); filter: brightness(.8); }
.swipe-banner { height: 150px; background: linear-gradient(135deg, var(--accent), var(--surface-3)); background-size: cover; background-position: center; position: relative; flex: none; }
.swipe-logo { position: absolute; left: 18px; bottom: -32px; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; border: 3px solid var(--surface); background: var(--accent); display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: #fff; }
.swipe-logo img { width: 100%; height: 100%; object-fit: cover; }
.swipe-body { padding: 42px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.swipe-body h2 { margin: 0; font-size: 1.5rem; }
.swipe-body p { margin: 0; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.swipe-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.swipe-stats { display: flex; gap: 16px; margin-top: auto; font-size: .9rem; color: var(--muted); } .swipe-stats strong { color: var(--text); }
.swipe-stamp { position: absolute; top: 22px; padding: 6px 14px; border: 4px solid; border-radius: 10px; font-weight: 900; font-size: 1.4rem; text-transform: uppercase; opacity: 0; transform: rotate(-12deg); pointer-events: none; z-index: 2; }
.swipe-stamp.like { left: 18px; color: var(--green); border-color: var(--green); } .swipe-stamp.nope { right: 18px; color: var(--red); border-color: var(--red); transform: rotate(12deg); }
.swipe-actions { display: flex; justify-content: center; gap: 22px; margin: 18px 0 8px; }
.swipe-btn { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--surface); font-size: 1.6rem; display: grid; place-items: center; cursor: pointer; color: var(--text); transition: transform .15s; }
.swipe-btn:hover { transform: scale(1.08); text-decoration: none; } .swipe-no { color: var(--red); } .swipe-yes { color: var(--green); } .swipe-info { width: 48px; height: 48px; align-self: center; font-weight: 800; font-size: 1.1rem; }
.swipe-help { text-align: center; }
.swipe-result { margin: 10px auto 20px; max-width: 900px; text-align: center; }
.swipe-ideal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 14px 0; text-align: left; }
.swipe-ideal .card { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--accent); }
.swipe-ideal .card .ideal-head { display: flex; gap: 10px; align-items: center; }
.swipe-ideal .ideal-logo { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--accent); display: grid; place-items: center; font-weight: 800; flex: none; } .swipe-ideal .ideal-logo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 420px) { .swipe-stack { height: 430px; } .swipe-banner { height: 120px; } .swipe-page .small-hero { padding-top: 10px; padding-bottom: 6px; } }
/* Pronostics */
.predict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; margin: 16px 0; }
.predict-grid h2 { font-size: 1.15rem; margin-top: 0; } .predict-sub { font-size: 1rem; margin: 16px 0 8px; }
.predict-form label span { font-weight: 700; }
.predict-top, .predict-fav, .predict-mine { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.predict-top li { display: flex; align-items: center; gap: 10px; } .predict-mine { list-style: decimal; padding-left: 22px; }
.live-list li.is-me { background: rgba(69, 209, 124, .1); border-radius: 8px; }
/* Vote cards */
.vcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 16px 0; }
.vcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; border-radius: 18px; color: var(--text); text-align: center;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--c1), var(--c2), var(--c1)) border-box; border: 4px solid transparent; transition: transform .15s; aspect-ratio: 4 / 5; justify-content: center; }
.vcard:hover { transform: translateY(-3px) rotate(-1deg); text-decoration: none; }
.vcard-epique, .vcard-legendaire { box-shadow: 0 0 22px color-mix(in srgb, var(--c1) 35%, transparent); }
.vcard-month { font-size: .75rem; font-weight: 800; text-transform: uppercase; color: var(--c1); }
.vcard-logo { width: 84px; height: 84px; border-radius: 18px; overflow: hidden; background: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 2rem; color: #fff; }
.vcard-logo img { width: 100%; height: 100%; object-fit: cover; }
.vcard-server { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vcard-votes { font-size: .85rem; color: var(--muted); } .vcard-rarity { font-size: .8rem; font-weight: 800; color: var(--c1); }
.vcard-big { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 28px; align-items: center; margin: 18px 0; }
.vcard-big img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.vcard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
@media (max-width: 700px) { .vcard-big { grid-template-columns: 1fr; } .vcard-big img { max-width: 360px; margin: 0 auto; } }
/* Découvrir tiles (home + /explorer) */
.dtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 16px 0 24px; }
.dtile { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: transform .15s, border-color .15s; }
.dtile:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--green); }
.dtile-ico { font-size: 1.8rem; line-height: 1; flex: none; }
.dtile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dtile-text { font-size: .88rem; color: var(--muted); }
.dtile-live { font-size: .8rem; font-weight: 700; color: var(--green); }
.dtile-new { font-size: .68rem; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: var(--green); color: var(--green-ink); vertical-align: 2px; }
.home-discover .section-head { margin-bottom: 0; }
@media (max-width: 560px) { .dtiles-compact { grid-template-columns: 1fr 1fr; } .dtiles-compact .dtile { flex-direction: column; gap: 8px; } .dtiles-compact .dtile-text { display: none; } }
.nav-discover { position: relative; } .nav-new { position: absolute; top: 4px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(69,209,124,.25); }
.thanks-card { display: flex; gap: 14px; align-items: center; color: var(--text); margin-top: 14px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--c1), var(--c2)) border-box; border: 3px solid transparent; }
.thanks-card:hover { text-decoration: none; } .thanks-card > span:last-child { display: flex; flex-direction: column; gap: 4px; } .tc-ico { font-size: 2rem; }
.thanks-predict { margin: 10px 0 0; }
.vis-mini { font-size: .78rem; padding: 1px 7px; border-radius: 99px; margin-left: 4px; } .vis-mini-good { background: rgba(69,209,124,.15); color: var(--green); } .vis-mini-mid { background: rgba(245,197,66,.15); color: var(--gold); } .vis-mini-low { background: rgba(240,101,101,.15); color: var(--red); }
.review-text { white-space: pre-wrap; font-size: .8rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 10px; max-height: 420px; overflow: auto; }
.vote-account { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(69,209,124,.08); border: 1px solid rgba(69,209,124,.3); }
.dash-reward { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: rgba(245,197,66,.08); border: 1px solid var(--gold-line, #6b5520); font-size: .9rem; display: flex; flex-direction: column; gap: 6px; }
.dash-reward-links { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quick-review { gap: 10px; } .quick-review .star-row label { font-size: 2rem; }
.alike-list { display: grid; gap: 10px; margin: 10px 0; }
.alike { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); border-left: 3px solid var(--accent, var(--green)); }
.alike:hover { text-decoration: none; background: var(--surface-3); }
.alike-logo { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--accent); font-weight: 800; }
.alike-logo img { width: 100%; height: 100%; object-fit: cover; } .alike-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alike-body .small:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; margin: 12px 0; }
.kit-msg { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.kit-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kit-text { white-space: pre-wrap; font-size: .82rem; margin: 0; font-family: inherit; color: var(--text-2); overflow-wrap: anywhere; }
.dash-launch { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: rgba(91,141,239,.08); border: 1px solid rgba(91,141,239,.35); font-size: .9rem; display: flex; flex-direction: column; gap: 6px; }
.dash-launch .goal-bar { margin: 2px 0 0; }
/* Link in bio (/go) */
.bio-page { max-width: 520px; padding-top: 26px; padding-bottom: 20px; }
.bio-head { text-align: center; }
.bio-logo svg, .bio-logo img { width: 64px; height: 64px; }
.bio-head h1 { margin: 8px 0 4px; font-size: 1.7rem; }
.bio-head p { margin: 0 0 6px; color: var(--muted); }
.bio-figs { display: flex; gap: 14px; justify-content: center; }
.bio-links, .bio-owner { display: grid; gap: 12px; margin-top: 18px; }
.bio-btn { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card, #121821); color: inherit; text-decoration: none; transition: transform .12s, border-color .12s; }
.bio-btn:hover, .bio-btn:focus-visible { transform: translateY(-1px); border-color: var(--green); }
.bio-btn strong { display: block; font-size: 1.08rem; } .bio-btn small { color: var(--muted); font-size: .85rem; }
.bio-emoji { font-size: 1.6rem; width: 38px; text-align: center; flex: none; }
.bio-main { background: linear-gradient(135deg, rgba(69,209,124,.22), rgba(94,224,240,.14)); border-color: rgba(69,209,124,.55); }
.bio-btn-owner { border-style: dashed; }
.bio-podium { margin-top: 22px; } .bio-podium h2, .bio-owner h2 { font-size: 1rem; margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bio-podium ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bio-podium a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.03); color: inherit; text-decoration: none; }
.bio-name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bio-urls { display: grid; gap: 8px; } .bio-net { min-width: 90px; font-weight: 700; }
/* Why CraftRank, launch offer */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
.why-grid h2 { font-size: 1.1rem; margin: 0 0 8px; } .why-grid p { margin: 0 0 8px; }
.why-figs { margin-bottom: 8px; }
.why-launch { margin-top: 18px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: rgba(91,141,239,.45); }
.why-launch h2 { margin: 0 0 6px; font-size: 1.15rem; } .why-launch p { margin: 0; }
.why-press { margin-top: 34px; } .why-press h3 { margin: 22px 0 10px; }
.why-texts { display: grid; gap: 12px; } .why-texts h3 { margin: 0; font-size: 1rem; }
.launch-mine { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .launch-mine li { display: grid; gap: 4px; }
.launch-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .launch-recent a { display: grid; gap: 2px; color: inherit; text-decoration: none; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.year-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.year-modes a { display: grid; gap: 2px; color: inherit; text-decoration: none; } .year-modes strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.year-winners { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
/* Devine le serveur */
.guess-form { display: grid; gap: 8px; } .guess-form label { font-weight: 700; }
.guess-input { display: flex; gap: 8px; } .guess-input input { flex: 1; min-width: 0; }
.guess-clue { margin: 4px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(245,197,66,.08); border: 1px solid rgba(245,197,66,.3); font-size: .92rem; }
.guess-page .table-wrap { position: relative; } .guess-table { margin-top: 16px; } .guess-table th[scope="row"] { white-space: nowrap; }
.guess-table td.gc { font-weight: 600; white-space: nowrap; font-size: .88rem; }
.gc-ok { background: rgba(69,209,124,.22); } .gc-part { background: rgba(245,197,66,.2); } .gc-no { background: rgba(255,255,255,.03); color: var(--muted); }
.gc-up, .gc-down { background: rgba(240,101,101,.14); }
.guess-win th { color: var(--green); }
.guess-result { margin-top: 18px; } .guess-result h2 { margin-top: 0; }
/* Monthly recap, Discord badge */
.recap-grid { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 18px; align-items: start; }
.recap-visual { margin: 0; display: grid; gap: 10px; } .recap-visual img { width: 100%; height: auto; border-radius: 12px; }
.recap-visual figcaption { display: flex; gap: 8px; flex-wrap: wrap; }
.recap-texts { display: grid; gap: 12px; } .recap-texts h2 { margin: 0; } .recap-texts h3 { margin: 0; font-size: 1rem; }
@media (max-width: 760px) { .recap-grid { grid-template-columns: 1fr; } }
.dbadge-row { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.dbadge-img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.dbadge-form { display: flex; gap: 8px; flex-wrap: wrap; } .dbadge-form input { flex: 1; min-width: 220px; }
@media (max-width: 760px) { .dbadge-row { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .guess-table thead { display: none; }
  .guess-table, .guess-table tbody { display: block; }
  .guess-table tr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
  .guess-table th[scope="row"], .guess-table td.gc-mode { grid-column: 1 / -1; }
  .guess-table th[scope="row"] { padding: 2px 4px; border: 0; }
  .guess-table td.gc { white-space: normal; text-align: center; border-radius: 8px; padding: 6px 4px; border: 0; font-size: .8rem; }
  .guess-table td.gc::before { content: attr(data-label); display: block; font-size: .66rem; font-weight: 600; color: var(--muted); }
}
/* Recommandés par CraftRank */
.reco { margin: 26px 0 8px; }
.reco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.reco-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent, var(--green)); color: inherit; text-decoration: none; transition: transform .12s, border-color .12s; }
.reco-card:hover, .reco-card:focus-visible { transform: translateY(-2px); border-color: var(--green); }
.reco-head { display: flex; align-items: center; gap: 10px; }
.reco-logo img, .reco-logo .logo-fallback { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; object-fit: cover; }
.reco-name { display: grid; min-width: 0; flex: 1; } .reco-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reco-score { font-weight: 800; font-size: 1.25rem; color: var(--green); white-space: nowrap; } .reco-score small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.reco-desc { margin: 0; font-size: .88rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reco-why { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: .8rem; color: var(--green); }
.dash-reco { margin: 8px 0; } .ok-txt { color: var(--green); }
.reco-table td.num { text-align: center; white-space: nowrap; }
/* Profile cosmetics picker */
.cosm-form { display: grid; gap: 14px; }
.cosm-group { border: 0; padding: 0; margin: 0; } .cosm-group legend { font-weight: 700; margin-bottom: 8px; }
.cosm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.cosm-opt { position: relative; cursor: pointer; }
.cosm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cosm-tile { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); text-align: center; height: 100%; }
.cosm-opt input:checked + .cosm-tile { border-color: var(--green); box-shadow: 0 0 0 3px rgba(69,209,124,.2); }
.cosm-opt input:focus-visible + .cosm-tile { outline: 2px solid var(--green); outline-offset: 2px; }
.cosm-opt.is-locked { cursor: not-allowed; } .cosm-opt.is-locked .cosm-tile { opacity: .55; filter: grayscale(.6); }
.cosm-av { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; background: linear-gradient(135deg, #45d17c, #5ee0f0); color: #04220f; margin: 6px 0 2px; }
.cosm-name { font-weight: 800; font-size: 1.05rem; min-height: 46px; display: grid; place-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cosm-title { font-weight: 700; color: var(--gold); min-height: 46px; display: grid; place-items: center; font-size: .9rem; }
.cosm-label { font-size: .8rem; font-weight: 600; display: grid; gap: 2px; } .cosm-label small { font-weight: 500; color: var(--muted); font-size: .72rem; }
.cosm-name .name-emerald { color: #34d399; } .cosm-name .name-diamond { color: #5ee0f0; }
.cosm-name .name-gold { background: linear-gradient(90deg, #ffe07a, #e9a916); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cosm-name .name-aurora { background: linear-gradient(90deg, #45d17c, #5ee0f0, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .cosm-name .name-emerald { color: #047857; } :root[data-theme="light"] .cosm-name .name-diamond { color: #0e7490; }
.warn-txt { color: #f0a020; }
/* Launcher obligatoire */
.badge-launcher { background: rgba(245,197,66,.14); color: var(--gold, #f5c542); border: 1px solid rgba(245,197,66,.4); }
.launcher-note { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(245,197,66,.07); border: 1px solid rgba(245,197,66,.35); }
.ln-ico { font-size: 1.4rem; line-height: 1; }
.ln-text { display: grid; gap: 2px; min-width: 0; } .ln-text strong { color: var(--gold, #f5c542); } .ln-text span { font-size: .88rem; color: var(--muted); }
.ln-btn { display: inline-grid; justify-items: center; line-height: 1.2; white-space: nowrap; } .ln-btn small { font-size: .72rem; font-weight: 500; opacity: .75; }
@media (max-width: 700px) { .launcher-note { grid-template-columns: auto 1fr; } .ln-ico { align-self: start; } .ln-btn { grid-column: 1 / -1; } }
.launcher-field { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; display: grid; gap: 8px; }
.launcher-dialog { max-width: 480px; width: calc(100% - 32px); border: 1px solid rgba(245,197,66,.5); border-radius: 16px; background: var(--surface, #121821); color: var(--text, #e9eef4); padding: 20px 22px; }
.launcher-dialog::backdrop { background: rgba(0,0,0,.6); }
.launcher-dialog h2 { margin: 0 0 8px; font-size: 1.2rem; } .launcher-dialog p { margin: 0 0 10px; }
.launcher-tips { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: .88rem; color: var(--muted); }
.launcher-other { color: #f0a020; }
.launcher-dialog .toolbar { display: flex; gap: 8px; flex-wrap: wrap; }