/* ============================================================
   ZENTRY — interface calquée FiveM (plein écran), serveurs Minecraft
   Réf : docs/fivem_reference.png
   ============================================================ */

:root {
  --bg:          #0a0a0e;
  --panel:       #15151c;
  --panel-2:     #1c1c25;
  --border:      #262630;
  --text:        #ececf2;
  --text-dim:    #9a9aa8;
  --text-faint:  #5d5d6b;
  --accent:      #e8194b;
  --accent-2:    #f5325b;
  --accent-glow: rgba(232, 25, 75, 0.35);
  --radius:      14px;
  --radius-sm:   10px;
  --font:        "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; }
body {
  background:
    radial-gradient(1300px 800px at 55% -20%, rgba(232,25,75,0.10), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
  height: 100vh;
}
a { color: inherit; text-decoration: none; }
code { font-family: "Consolas", monospace; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #2c2c38; border-radius: 8px; }

/* ---------------- BUTTONS ---------------- */
.btn {
  border: none; border-radius: 10px;
  font-family: inherit; font-weight: 600; font-size: 13px;
  padding: 9px 15px; cursor: pointer; color: var(--text);
  transition: transform .12s, background .2s, box-shadow .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(0.3); }
.btn:disabled:hover, .btn[disabled]:hover { box-shadow: none; border-color: inherit; background: inherit; transform: none; }
.btn-pill { border-radius: 999px; padding: 9px 22px; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px var(--accent-glow); }
.btn-primary:hover { box-shadow: 0 8px 24px var(--accent-glow); }
.btn-ghost { background: transparent; border: 1.5px solid #45454f; }
.btn-ghost:hover { border-color: var(--text); background: rgba(255,255,255,0.05); }

/* bouton boost = emplacement du coeur "favori" FiveM */
.btn-boost-icon {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(232,25,75,0.12); border: 1.5px solid rgba(232,25,75,0.45);
  color: var(--accent-2);
}
.btn-boost-icon:hover { background: rgba(232,25,75,0.22); box-shadow: 0 0 16px var(--accent-glow); }
.boost-count { font-size: 15px; font-weight: 800; color: var(--accent-2); white-space: nowrap; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; font-size: 14px;
  display: grid; place-items: center; transition: .2s;
}
.icon-btn:hover { color: var(--text); background: #23232e; }

/* menu déroulant du ⚙ */
.gear-wrap { position: relative; }
.dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 190px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.dropdown[hidden] { display: none; }
.dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; padding: 10px 12px; border-radius: 9px; cursor: pointer; transition: background .15s; }
.dropdown-item:hover { background: var(--panel-2); }
.dropdown-item span { font-size: 15px; }
.notif-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; display: inline-grid; place-items: center; }

/* notifications */
.notif-list { list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.notif-item { display: flex; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; border-left-width: 3px; }
.notif-item.approved { border-left-color: #22c55e; }
.notif-item.refused { border-left-color: var(--accent); }
.notif-ico { font-size: 18px; }
.notif-content { flex: 1; min-width: 0; }
.notif-head { font-size: 14px; font-weight: 700; }
.notif-msg { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.notif-date { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.notif-empty { text-align: center; color: var(--text-faint); font-size: 14px; padding: 30px 0; }

/* modal de revue admin */
.review-modal { max-width: 600px; }
.btn-refuse { border-color: rgba(232,25,75,0.5); color: var(--accent-2); }
.btn-refuse:hover { background: rgba(232,25,75,0.12); }
.review-preview { display: flex; gap: 14px; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.review-preview .server-icon { width: 56px; height: 56px; font-size: 18px; }
.review-preview .rp-name { font-size: 18px; font-weight: 800; }
.review-preview .rp-ip { font-size: 13px; color: var(--text-dim); }
.review-preview .rp-tags { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.review-banner { height: 110px; border-radius: 10px; background: linear-gradient(135deg,#2a2a38,#16161e); background-size: cover; background-position: center; margin-bottom: 12px; }
.review-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-top: 12px; }
.diff-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13px; }
.diff-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.diff-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.diff-field { color: var(--text-faint); font-weight: 600; width: 90px; }
.diff-before { color: var(--text-dim); text-decoration: line-through; }
.diff-after { color: #22c55e; font-weight: 600; }
.diff-none { color: var(--text-faint); font-style: italic; }

/* profil */
.profil-sep { margin: 6px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; border-top: 1px solid var(--border); padding-top: 16px; }

/* liste mes serveurs */
.myservers-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.myserver-item { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; }
.myserver-item .server-icon { width: 40px; height: 40px; font-size: 14px; }
.myserver-info { flex: 1; min-width: 0; }
.myserver-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myserver-meta { font-size: 12px; color: var(--text-faint); }
.myserver-actions { display: flex; gap: 8px; flex-shrink: 0; }
.myserver-actions button { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); transition: .2s; }
.myserver-actions .ms-view:hover { color: var(--text); }
.myserver-actions .ms-del { border-color: rgba(232,25,75,0.4); color: var(--accent-2); }
.myserver-actions .ms-del:hover { background: rgba(232,25,75,0.14); }
.myservers-empty { text-align: center; color: var(--text-faint); font-size: 14px; padding: 30px 0; }
.status-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; vertical-align: middle; }
.status-pill.pending { background: rgba(234,179,8,0.15); color: #eab308; }
.status-pill.live { background: rgba(34,197,94,0.15); color: #22c55e; }

/* ---------------- NAVBAR ---------------- */
.navbar {
  flex: 0 0 auto;
  position: relative; z-index: 50;   /* la navbar (et ses menus déroulants) au-dessus du contenu */
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: rgba(10,10,14,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-left { display: flex; align-items: center; gap: 30px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.logo-word { font-weight: 800; letter-spacing: 2px; font-size: 17px; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--text-dim); font-weight: 600; font-size: 14px; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links .ext { font-size: 11px; opacity: .55; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-stats { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; }
.nav-stat { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.nav-stat span:not(.ico) { color: var(--text); font-weight: 700; }
.nav-stat .ico { font-size: 10px; }
.nav-cta { border-radius: 999px; padding: 9px 20px; }
.nav-login { border-radius: 999px; padding: 9px 18px; }

/* sélecteur de langue / pays */
.lang-wrap { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; }
.lang-btn:hover { border-color: #3a3a46; }
.lang-caret { color: var(--text-faint); font-size: 11px; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 180px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.lang-menu[hidden] { display: none; }
.lang-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; padding: 9px 12px; border-radius: 9px; cursor: pointer; transition: background .15s; }
.lang-item:hover { background: var(--panel-2); }
.lang-item.active { background: rgba(232,25,75,0.12); color: var(--accent-2); }
.lang-item .lang-flag { font-size: 16px; }
.lang-item.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.lang-item.disabled:hover { background: none; }
.lang-item .lang-soon { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; }
.nav-login.is-admin { border-color: #22c55e; color: #22c55e; }
.login-modal { max-width: 420px; }
.login-foot { margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-dim); }
.login-foot a { color: var(--accent-2); font-weight: 600; }
.field-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-dim); cursor: pointer; user-select: none; }
.field-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
#google-signin { margin-bottom: 4px; }
.google-btn { display: flex; justify-content: center; min-height: 40px; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ============================================================
   LAYOUT PLEIN ÉCRAN : 3 colonnes, remplit toute la hauteur
   ============================================================ */
.layout {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 14px; padding: 14px 18px;
}

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.card-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-faint); text-transform: uppercase; }

.server-icon { border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; background: var(--accent); overflow: hidden; }
.server-icon img { width: 100%; height: 100%; object-fit: cover; }
.server-icon.sm { width: 44px; height: 44px; font-size: 15px; }
.server-icon.md { width: 54px; height: 54px; font-size: 18px; }
.server-icon.lg { width: 72px; height: 72px; font-size: 24px; border-radius: 16px; }
.server-icon.xl { width: 96px; height: 96px; font-size: 32px; border-radius: 18px; }

.footer-players { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.footer-players span:not(.ico) { color: var(--text); font-weight: 600; }
.flag { font-size: 15px; }

/* ============================================================
   COLONNE PRINCIPALE
   ============================================================ */
.main-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* --- top row : browse + serveur n°1 + favoris + historique --- */
.top-row { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }

.browse-card {
  position: relative; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(232,25,75,0.30), rgba(232,25,75,0.05) 55%, var(--panel) 85%);
  cursor: pointer; overflow: hidden; transition: filter .2s;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 16px;
}
.browse-card:hover { filter: brightness(1.18); }
.browse-text { font-weight: 800; letter-spacing: 1px; font-size: 15px; line-height: 1.2; color: var(--accent-2); }
.browse-arrow { color: var(--accent-2); font-size: 15px; }

/* --- carte "Nouveaux serveurs" (compacte) --- */
.new-card { padding: 12px 14px; display: flex; flex-direction: column; }
.new-card .card-kicker { margin-bottom: 8px; }
.new-list { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: center; }
.new-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: pointer; transition: background .15s; }
.new-item:hover { background: var(--panel-2); }
.new-item .server-icon { width: 34px; height: 34px; font-size: 12px; border-radius: 9px; }
.new-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.new-boost { font-size: 12px; font-weight: 800; color: var(--accent-2); flex-shrink: 0; }
.spotlight-content .server-icon, .spotlight-name { cursor: pointer; }
.spotlight-name:hover { color: var(--accent-2); transition: color .15s; }

/* --- label section --- */
.section-label { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 2px 2px; font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.section-label .chev { color: var(--accent-2); margin-left: 2px; }

/* --- spotlight (remplit l'espace vertical) --- */
.spotlight {
  flex: 1 1 auto; min-height: 0; position: relative;
  border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
}
.spotlight-bg { position: absolute; inset: 0; background: #15151c; transition: background .6s ease; }
.spotlight-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,8,12,0.96) 28%, rgba(8,8,12,0.5) 68%, rgba(8,8,12,0.25)); }
/* bannière présente : voile beaucoup plus léger -> on voit l'image */
.spotlight.has-banner .spotlight-overlay {
  background:
    linear-gradient(100deg, rgba(8,8,12,0.92) 0%, rgba(8,8,12,0.6) 32%, rgba(8,8,12,0.15) 58%, transparent 80%),
    linear-gradient(to top, rgba(8,8,12,0.8) 0%, transparent 40%);
}
.spotlight-watermark { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 7vw; font-weight: 900; color: rgba(255,255,255,0.045); white-space: nowrap; letter-spacing: 4px; z-index: 1; user-select: none; }

.spotlight-header { position: relative; z-index: 2; display: flex; align-items: center; padding: 16px 22px 0; }
.badge { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 20px; }
.badge-rank { background: var(--accent); color: #fff; }
.spotlight-game-tags { margin-left: auto; display: flex; gap: 7px; }
.spotlight-game-tags .tag { font-size: 11px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.08); border: 1px solid var(--border); padding: 4px 10px; border-radius: 7px; }

.spotlight-content { position: relative; z-index: 2; display: flex; gap: 20px; padding: 18px 22px; align-items: center; flex: 1; min-height: 0; }
.spotlight-body { flex: 1; min-width: 0; }
.spotlight-name { font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.04; text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.spotlight-desc { max-width: 560px; color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 10px 0 14px; }

.spotlight-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 0 22px 16px; }
.sl-ip-inline { font-size: 13px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.sl-ip-inline code { color: var(--text); font-weight: 600; }
.btn-copy { background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: .2s; }
.btn-copy:hover { color: var(--text); background: rgba(255,255,255,0.14); }
.btn-copy.copied { color: #22c55e; border-color: #22c55e; }

.rotation-bar { position: relative; z-index: 2; height: 4px; background: rgba(255,255,255,0.08); }
.rotation-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent-glow); }

/* --- quick bar : encadré top serveurs + cases qui défilent --- */
.quick-bar {
  flex: 0 0 auto; display: flex; align-items: stretch; gap: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.quick-featured {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 16px; font-weight: 700; font-size: 12px;
  border-right: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(232,25,75,0.10), transparent 70%);
  max-width: 360px;
}
.server-icon.xs { width: 34px; height: 34px; font-size: 12px; border-radius: 9px; }
.quick-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.quick-sep { color: var(--text-faint); flex-shrink: 0; }
.quick-best { color: var(--accent-2); flex-shrink: 0; }

.quick-track-wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.quick-track {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 8px; padding: 10px;
}
.quick-tile {
  flex: 1 1 0; min-width: 0; height: 50px; border-radius: 11px;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
  cursor: pointer; border: 2px solid transparent; position: relative;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}
/* la 1ère case (n°1) occupe 2× la largeur des autres */
.quick-tile:first-child { flex: 2 1 0; }
.quick-tile:hover { transform: translateY(-2px); }
.quick-tile.active { border-color: var(--accent); box-shadow: 0 0 16px var(--accent-glow); transform: translateY(-2px); }
.quick-tile .tile-rank {
  position: absolute; top: -6px; left: -6px;
  background: var(--accent); color: #fff; font-size: 9px; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--panel);
}

/* --- panneaux favoris / historique (petits, dans la rangée du haut) --- */
.mini-panel { padding: 14px 16px; display: flex; flex-direction: column; }
.mini-head { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-faint); margin-bottom: 10px; }
.mini-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 12px; color: var(--text-faint); line-height: 1.6; }
.mini-empty small { color: #44444f; }
/* carte partenaire (CrewManager) */
.partner-card { text-decoration: none; cursor: pointer; transition: border-color .2s, transform .15s; }
.partner-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.partner-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.partner-logo { max-width: 100%; max-height: 70px; object-fit: contain; border-radius: 8px; }
.partner-name { font-size: 13px; font-weight: 700; color: var(--text); }
/* carte mise en avant (Discord) */
.highlight-card { text-decoration: none; cursor: pointer; transition: border-color .2s, transform .15s; }
.highlight-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.highlight-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.highlight-ico { font-size: 26px; }
.highlight-text { font-size: 13px; color: var(--text-dim); }
.highlight-badge { font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); padding: 5px 14px; border-radius: 20px; box-shadow: 0 4px 12px var(--accent-glow); }
.highlight-cta { font-size: 13px; font-weight: 700; color: var(--accent-2); }
.highlight-card .hl-ic { width: 46px; height: 46px; font-size: 15px; }
.highlight-card .hl-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* --- bottom row : ajouter + onglets --- */
.bottom-row { flex: 0 0 auto; display: flex; gap: 12px; align-items: stretch; }
.create-card { flex: 1 1 auto; padding: 12px 18px; background: linear-gradient(120deg, rgba(232,25,75,0.14), var(--panel) 60%); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.create-card .card-kicker { margin-bottom: 0; }
.create-card .btn-pill { flex-shrink: 0; }
.visit-counter { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 20px; }
.visit-ico { font-size: 15px; opacity: .8; }
.visit-num { font-size: 18px; font-weight: 800; color: var(--accent-2); }
.visit-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; }

/* ============================================================
   COLONNE DROITE : actus
   ============================================================ */
.feed { display: flex; flex-direction: column; min-height: 0; padding: 16px 16px 8px; }
.feed-head { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--text-faint); margin-bottom: 8px; }
.feed-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 4px; }
.news-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: none; }
.news-author { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.news-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.news-date { color: var(--text-faint); font-weight: 400; font-size: 12px; margin-left: auto; }
.news-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.news-body { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.news-img { width: 100%; border-radius: 10px; margin-top: 10px; display: block; }
.news-thumb { height: 100px; border-radius: 10px; margin-top: 10px; background: linear-gradient(135deg, #2a2a38, #16161e); }

.quick-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }

/* ============================================================
   PAGE PARCOURIR LES SERVEURS
   ============================================================ */
.browse-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 24px; }
.logo { text-decoration: none; }

/* --- barre du haut : icônes + recherche + tri --- */
.browse-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.browse-icons { display: flex; gap: 6px; }
.bicon { width: 42px; height: 42px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); font-size: 17px; cursor: pointer; transition: .2s; display: grid; place-items: center; }
.bicon:hover { color: var(--text); }
.bicon.active { color: var(--text); border-color: var(--accent); }
.search-box { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 11px 16px; transition: border-color .2s; }
.search-box.big { flex: 1 1 auto; }
.search-box:focus-within { border-color: var(--accent); }
.search-ico { opacity: .55; font-size: 14px; }
.search-box input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 15px; }
.sort-btns { display: flex; gap: 8px; flex-shrink: 0; }
.sort-btn { background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); border-radius: 10px; padding: 11px 15px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; white-space: nowrap; }
.sort-btn:hover { color: var(--text); }
.sort-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow); }

/* --- liste de serveurs (lignes) --- */
.server-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 4px; }
.server-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.server-row:hover { background: var(--panel); }
.sr-rank { width: 34px; font-size: 13px; font-weight: 800; color: var(--text-faint); flex-shrink: 0; }
.sr-icon { width: 46px; height: 46px; }
.sr-main { flex: 1 1 auto; min-width: 0; }
.sr-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-chev { color: var(--accent-2); font-size: 12px; }
.sr-desc { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sr-tags { display: flex; gap: 6px; flex-shrink: 0; }
.sr-tags .tag { font-size: 11px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.07); border: 1px solid var(--border); padding: 4px 9px; border-radius: 7px; }
.sr-players { font-size: 14px; color: var(--text); font-weight: 600; flex-shrink: 0; width: 110px; text-align: right; }
.sr-players .ico { font-size: 11px; opacity: .7; }
.sr-boost { font-size: 14px; font-weight: 800; color: var(--accent-2); flex-shrink: 0; width: 64px; text-align: right; }
.empty-state { text-align: center; color: var(--text-faint); font-size: 14px; padding: 40px 0; }

@media (max-width: 900px) {
  .sr-tags, .sr-desc { display: none; }
}

/* ============================================================
   MODAL : BOOSTER UN SERVEUR
   ============================================================ */
.boost-modal { max-width: 640px; }
.boost-modal .search-box { margin-top: 4px; }
.boost-results { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; margin-top: 10px; }
.boost-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: .15s; }
.boost-result:hover { background: var(--panel-2); }
.boost-result.active { border-color: var(--accent); background: var(--panel-2); }
.boost-result .server-icon { width: 36px; height: 36px; font-size: 13px; }
.boost-result .br-name { flex: 1; font-size: 14px; font-weight: 600; }
.boost-result .br-ip { font-size: 12px; color: var(--text-faint); }

.boost-selected { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; background: linear-gradient(120deg, rgba(232,25,75,0.12), var(--bg) 70%); border: 1px solid var(--accent); border-radius: 11px; }
.boost-selected .bs-info { flex: 1; min-width: 0; }
.boost-selected .bs-name { font-size: 15px; font-weight: 700; }
.boost-selected .bs-ip { font-size: 12px; color: var(--text-dim); }
.boost-selected .bs-boosts { font-size: 16px; font-weight: 800; color: var(--accent-2); }

.pack-title { margin: 20px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; }
.pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pack-card { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; transition: transform .15s, border-color .2s, box-shadow .2s; }
.pack-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 20px var(--accent-glow); }
.pack-card.popular { border-color: var(--accent); }
.pack-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--text-dim); text-transform: uppercase; }
.pack-boosts { font-size: 22px; font-weight: 800; margin: 6px 0 2px; }
.pack-boosts .ico { font-size: 14px; color: var(--accent-2); }
.pack-price { font-size: 15px; font-weight: 800; color: var(--accent-2); }
.pack-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; }
.pack-discount { position: absolute; top: 7px; right: 7px; background: #22c55e; color: #06210f; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.pack-old { text-decoration: line-through; color: var(--text-faint); font-weight: 600; font-size: 12px; margin-right: 5px; }

/* ---- code de parrainage (modal boost) ---- */
.ref-row { margin-top: 14px; }
.ref-input-wrap { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 7px 8px 7px 16px; transition: border-color .2s; }
.ref-input-wrap:focus-within { border-color: var(--accent); }
.ref-input-wrap input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 14px; text-transform: uppercase; }
.ref-input-wrap input::placeholder { text-transform: none; }
.ref-input-wrap .btn { padding: 7px 14px; flex-shrink: 0; }
.ref-feedback { font-size: 12px; font-weight: 600; margin-top: 8px; }
.ref-feedback.ok { color: #22c55e; }
.ref-feedback.bad { color: var(--accent-2); }

@media (max-width: 560px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   MODAL : AJOUTER UN SERVEUR
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,5,8,0.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; font-size: 14px;
}
.modal-close:hover { color: var(--text); }
.modal-title { font-size: 22px; font-weight: 800; }
.modal-sub { font-size: 13px; color: var(--text-dim); margin: 6px 0 22px; }

/* --- cadre détails serveur --- */
.detail-modal { padding: 0; overflow: hidden; }
.detail-banner {
  position: relative; height: 150px;
  background: linear-gradient(135deg, #2a2a38, #16161e);
  background-size: cover; background-position: center;
}
.detail-rank-badge {
  position: absolute; bottom: 12px; left: 18px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 800;
  padding: 5px 12px; border-radius: 20px; box-shadow: 0 4px 12px var(--accent-glow);
}
.detail-head { display: flex; align-items: center; gap: 16px; padding: 0 24px; margin-top: -28px; position: relative; z-index: 2; }
.detail-head .server-icon { border: 3px solid var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.detail-headinfo { padding-top: 28px; min-width: 0; }
.detail-name { font-size: 24px; font-weight: 800; line-height: 1.1; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.detail-tags .tag { font-size: 11px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.07); border: 1px solid var(--border); padding: 3px 9px; border-radius: 7px; }

.detail-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 20px 24px 0; }
.detail-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
.detail-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; }
.detail-val { font-size: 18px; font-weight: 800; margin-top: 4px; display: block; }
.detail-val.accent { color: var(--accent-2); }

.detail-ip { display: flex; align-items: center; gap: 10px; margin: 16px 24px 0; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.detail-ip .detail-label { margin-right: 2px; }
.detail-ip code { flex: 1; color: var(--text); font-weight: 700; font-size: 14px; }

.detail-desc { padding: 16px 24px 0; font-size: 14px; color: var(--text-dim); line-height: 1.55; }
.detail-actions { display: flex; align-items: center; gap: 12px; padding: 20px 24px 24px; }
.detail-actions .btn-del { margin-left: auto; border-color: rgba(232,25,75,0.4); color: var(--accent-2); }
.detail-actions .btn-del:hover { background: rgba(232,25,75,0.12); border-color: var(--accent-2); }

.add-form { display: flex; flex-direction: column; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field input, .field textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; color: var(--text); font-family: inherit; font-size: 14px;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input[type=color] { padding: 4px; height: 42px; cursor: pointer; }
.field textarea { resize: vertical; }
.url-input { margin-top: 8px; font-size: 13px !important; }

.upload { cursor: pointer; }
.upload-preview {
  height: 80px; border: 1.5px dashed var(--border); border-radius: 10px;
  display: grid; place-items: center; text-align: center;
  font-size: 12px; color: var(--text-faint); background: var(--bg);
  background-size: cover; background-position: center; overflow: hidden;
}
.upload-preview.has-img { border-style: solid; color: transparent; }
.upload:hover .upload-preview { border-color: var(--accent); }

.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 6px; }

.manage { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.manage-head { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); margin-bottom: 12px; text-transform: uppercase; }
.manage-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.manage-item { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; }
.manage-item .m-name { flex: 1; font-size: 14px; font-weight: 600; }
.manage-item .m-ip { font-size: 12px; color: var(--text-faint); }
.manage-del { background: rgba(232,25,75,0.12); border: 1px solid rgba(232,25,75,0.4); color: var(--accent-2); border-radius: 7px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.manage-del:hover { background: rgba(232,25,75,0.22); }

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.admin-tag { font-size: 13px; font-weight: 700; color: #22c55e; }
.admin-locked { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; }
.locked-card { text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 40px; max-width: 420px; }
.locked-ico { font-size: 44px; margin-bottom: 12px; }
.locked-card h2 { font-size: 20px; margin-bottom: 8px; }
.locked-card p { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }

/* layout panel : sidebar catégories + contenu */
.admin-shell { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.admin-nav { width: 232px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.anav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; color: var(--text-dim); font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 14px; border-radius: 10px; cursor: pointer; transition: .15s; }
.anav-item:hover { background: var(--panel-2); color: var(--text); }
.anav-item.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 6px 16px var(--accent-glow); }
.anav-ico { font-size: 16px; }
.anav-item .count-badge { margin-left: auto; }
.anav-item.pulse { animation: anav-pulse .5s ease-in-out 0s 4; }
@keyframes anav-pulse { 0%, 100% { background: var(--panel-2); } 50% { background: var(--accent); color: #fff; } }
.admin-content { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 22px; }
.admin-cat { display: flex; flex-direction: column; gap: 22px; }
.admin-section { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.admin-h { font-size: 16px; font-weight: 800; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.count-badge { font-size: 12px; font-weight: 800; background: var(--accent); color: #fff; padding: 2px 9px; border-radius: 20px; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.stat-card .sc-num { font-size: 26px; font-weight: 800; }
.stat-card .sc-num.accent { color: var(--accent-2); }
.stat-card .sc-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; margin-top: 4px; }
.visit-bars { display: flex; flex-direction: column; gap: 8px; }
.vbar-row { display: grid; grid-template-columns: 78px 1fr 60px; align-items: center; gap: 12px; }
.vbar-date { font-size: 12px; color: var(--text-dim); }
.vbar-track { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; height: 18px; overflow: hidden; }
.vbar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 8px; min-width: 2px; }
.vbar-num { font-size: 13px; font-weight: 700; text-align: right; }

.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; }
.admin-row .server-icon { width: 40px; height: 40px; font-size: 14px; }
.admin-row .ar-info { flex: 1; min-width: 0; }
.admin-row .ar-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row .ar-meta { font-size: 12px; color: var(--text-faint); }
.admin-row .ar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.abtn { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); transition: .2s; }
.abtn:hover { color: var(--text); }
.abtn.ok { border-color: rgba(34,197,94,0.4); color: #22c55e; }
.abtn.ok:hover { background: rgba(34,197,94,0.14); }
.abtn.danger { border-color: rgba(232,25,75,0.4); color: var(--accent-2); }
.abtn.danger:hover { background: rgba(232,25,75,0.14); }
.admin-empty { text-align: center; color: var(--text-faint); font-size: 13px; padding: 20px 0; }

.admin-table { display: flex; flex-direction: column; gap: 6px; }
.manage-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.manage-row .server-icon { width: 36px; height: 36px; font-size: 12px; }
.manage-row .mr-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boost-ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.boost-ctrl button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 16px; font-weight: 800; cursor: pointer; line-height: 1; }
.boost-ctrl button:hover { border-color: var(--accent); color: var(--accent-2); }
.boost-ctrl .bc-val { min-width: 48px; text-align: center; font-weight: 800; color: var(--accent-2); }

/* ---- formulaire code (3 champs en ligne) ---- */
.code-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.code-form .field { flex: 1 1 180px; }
.code-form .form-actions { flex: 0 0 auto; }

/* ---- cartes codes de parrainage ---- */
.codes-list { display: flex; flex-direction: column; gap: 12px; }
.code-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.code-head { display: flex; align-items: center; gap: 12px; }
.code-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.code-tag { font-family: "Consolas", monospace; font-weight: 800; font-size: 15px; background: rgba(232,25,75,0.12); border: 1px solid rgba(232,25,75,0.35); color: var(--accent-2); padding: 3px 10px; border-radius: 8px; }
.code-disc { font-size: 12px; font-weight: 800; background: #22c55e; color: #06210f; padding: 2px 8px; border-radius: 6px; }
.code-disc.none { background: var(--panel-2); color: var(--text-faint); }
.code-partner { font-size: 13px; color: var(--text-dim); }
.code-metrics { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin: 12px 0; }
.code-metrics b { color: var(--text); }
.code-metrics .code-rev b { color: var(--accent-2); }

/* ---- tableaux (usages + utilisateurs) ---- */
.uses-table, .urow { width: 100%; }
.uses-table { border-collapse: collapse; font-size: 12px; }
.uses-table th { text-align: left; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 10px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.uses-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text-dim); }
.uses-table td:first-child { color: var(--text); font-weight: 600; }
.diff-none { text-align: center; color: var(--text-faint); font-style: italic; }

/* ---- onglets utilisateurs ---- */
.utabs { display: flex; gap: 8px; margin-bottom: 16px; }
.utab { background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: .15s; }
.utab:hover { color: var(--text); }
.utab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.urow { display: grid; grid-template-columns: 1.4fr 1.2fr .7fr 1.1fr .8fr 1fr; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.urow .u-buyer { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow .u-srv, .urow .u-code, .urow .u-date { color: var(--text-dim); font-size: 12px; }
.urow .u-boosts { color: var(--accent-2); font-weight: 700; }
.urow .u-paid { font-weight: 800; }
.urow.urow-all { grid-template-columns: 1.5fr 1.4fr 1fr .6fr; }
.urow.clickable { cursor: pointer; transition: background .15s; }
.urow.clickable:hover { background: var(--panel-2); }

/* badges de rôle utilisateur */
.ubadge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; vertical-align: middle; background: var(--panel-2); color: var(--text-dim); }
.ubadge.buyer { background: rgba(245,50,91,0.15); color: var(--accent-2); }
.ubadge.owner { background: rgba(34,197,94,0.15); color: #22c55e; }

/* fiche profil utilisateur (modal) */
.uprofile-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.uprofile-sub { font-size: 12px; color: var(--text-dim); }

/* en-tête secondaire + logs */
.muted-h { font-size: 12px; font-weight: 500; color: var(--text-faint); }
.logs-list { display: flex; flex-direction: column; gap: 4px; }
.log-row { display: grid; grid-template-columns: 150px 70px 1fr; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.log-row .log-date { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.log-row .log-actor { font-size: 11px; font-weight: 700; color: var(--accent-2); text-transform: uppercase; }
.log-row .log-action { color: var(--text-dim); }
@media (max-width: 700px) { .log-row { grid-template-columns: 1fr; gap: 2px; } }

/* sélecteur de catégories (chips) du formulaire */
.field-hint { font-weight: 400; color: var(--text-faint); font-size: 11px; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-chip {
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-dim);
  transition: .15s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--text); }
.tag-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* filtre par catégorie (page Serveurs) */
.cat-filter {
  flex-shrink: 0; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: 10px; padding: 9px 12px; cursor: pointer;
}
.cat-filter:focus { outline: none; border-color: var(--accent); }

/* pastille de statut live (joueurs connectés) */
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.online-dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.online-dot.off { background: #6b7280; }

/* ============================================================
   CŒURS (boost gratuit)
   ============================================================ */
.btn-heart-icon {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; font-size: 16px;
  background: rgba(255,77,109,0.12); border: 1.5px solid rgba(255,77,109,0.42);
  transition: transform .12s, background .2s;
}
.btn-heart-icon:hover { background: rgba(255,77,109,0.24); transform: translateY(-1px); }
.heart-count { color: #ff6b88; }

/* create-card : kicker + bouton classement à gauche */
.create-left { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.btn-heart-rank { font-size: 12px; padding: 6px 14px; }

/* classement cœur (modal accueil) */
.hearts-rank { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.hr-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; cursor: pointer; transition: border-color .15s, transform .15s; }
.hr-row:hover { border-color: var(--accent); transform: translateX(2px); }
.hr-rank { font-weight: 800; color: var(--text-faint); min-width: 32px; }
.hr-ic { width: 38px; height: 38px; font-size: 13px; flex-shrink: 0; }
.hr-name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-hearts { font-weight: 800; color: #ff6b88; flex-shrink: 0; }
.sr-heart { color: #ff6b88; }

/* ajout de cœurs (admin) */
.hearts-add-row { display: flex; gap: 12px; align-items: flex-end; }
.uprofile-h { font-size: 13px; font-weight: 800; margin: 18px 0 8px; }

@media (max-width: 900px) {
  .admin-cols { grid-template-columns: 1fr; }
  .admin-nav { width: 64px; }
  .anav-item span:not(.anav-ico):not(.count-badge) { display: none; }
  .urow { grid-template-columns: 1fr 1fr; font-size: 12px; }
}

/* ============================================================
   RESPONSIVE (sous 1100px : on autorise le scroll)
   ============================================================ */
@media (max-width: 1100px) {
  html, body { overflow: auto; }
  body { height: auto; min-height: 100vh; }
  .layout { grid-template-columns: 1fr; }
  .top-row { grid-template-columns: 1fr 1fr; height: auto; }
  .spotlight { min-height: 360px; }
  .bottom-row { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .top-row { grid-template-columns: 1fr; }
}