:root{
            --bg0:#0d0a09;
            --bg1:#0d0a09;
            --card:#0d0a09;
            --card2:rgba(255,255,255,0.08);
            --line:rgba(148,163,184,.16);
            --text:#f0ece6;
            --muted:#80786f;
            --accent:#ff6b35;
            --accent2:#22c55e;
            --danger:#ef4444;
            --warn:#f59e0b;
            --gold:#facc15;
            --shadow: 0 24px 60px rgba(2,6,23,.55);
        }
        *{box-sizing:border-box}
        html,body{margin:0;padding:0}
        body{
            font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            color:var(--text);
            background:
                radial-gradient(900px 420px at 8% 10%, rgba(59,130,246,.18), transparent 60%),
                radial-gradient(900px 420px at 92% 0%, rgba(34,197,94,.12), transparent 60%),
                radial-gradient(1000px 520px at 70% 110%, rgba(46,163,120,.10), transparent 60%),
                var(--bg0);
        }
        a{color:inherit;text-decoration:none}
        a:hover{opacity:.92}

        /* Topbar */
        .topbar{
            position:sticky;top:0;z-index:80;
            backdrop-filter: blur(14px);
            background: linear-gradient(to right, rgba(2,6,23,.92), rgba(2,6,23,.72));
            border-bottom:1px solid var(--line);
        }
        .topbar-inner{
            max-width:1180px;margin:0 auto;padding:10px 16px;
            display:flex;align-items:center;justify-content:space-between;gap:12px;
        }
        .brand{display:flex;align-items:center;gap:10px}
        .logo{
            width:34px;height:34px;border-radius:12px;
            background:
                radial-gradient(circle at 30% 0, rgba(96,165,250,.95), transparent 55%),
                radial-gradient(circle at 80% 120%, rgba(99,102,241,.85), transparent 55%),
                rgba(15,23,42,.95);
            border:1px solid rgba(148,163,184,.28);
            box-shadow: 0 16px 30px rgba(2,6,23,.4);
            display:flex;align-items:center;justify-content:center;
            font-weight:800;font-size:12px;letter-spacing:.08em;
        }
        .brand-title{font-weight:800;letter-spacing:.02em;font-size:14px}
        .nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
        .nav a{font-size:12px;color:var(--muted)}
        .nav a:hover{color:var(--text)}
        .userpill{
            display:flex;align-items:center;gap:8px;
            padding:6px 10px;border-radius:999px;
            background: rgba(15,23,42,.75);
            border:1px solid rgba(148,163,184,.25);
        }
        .ava{width:22px;height:22px;border-radius:999px;overflow:hidden;border:1px solid rgba(148,163,184,.4)}
        .ava img{width:100%;height:100%;object-fit:cover;display:block}

        /* Page */
        .wrap{max-width:1180px;margin:0 auto;padding:16px 16px 52px}

        .flash{margin:12px 0 14px;padding:10px 12px;border-radius:14px;font-size:13px;display:flex;gap:8px;align-items:center;border:1px solid var(--line);background: rgba(15,23,42,.75)}
        .flash.ok{border-color:rgba(34,197,94,.35);background: rgba(34,197,94,.10);color:#bbf7d0}
        .flash.err{border-color:rgba(239,68,68,.35);background: rgba(239,68,68,.10);color:#fecaca}

        /* Hero */
        .hero{
            border-radius:22px;
            overflow:hidden;
            border:1px solid rgba(148,163,184,.18);
            box-shadow: var(--shadow);
            background: rgba(15,23,42,.55);
        }
        .hero-cover{
            min-height:160px;
            background:
                linear-gradient(180deg, rgba(2,6,23,.22), rgba(2,6,23,.92)),
                radial-gradient(circle at 10% 20%, rgba(59,130,246,.40), transparent 55%),
                radial-gradient(circle at 90% 30%, rgba(34,197,94,.25), transparent 55%),
                rgba(15,23,42,.9);
            background-size:cover;
            background-position:center;
            position:relative;
        }
        .hero-inner{padding:16px 16px 18px;display:flex;gap:14px;align-items:flex-start}
        .server-ico{width:86px;height:86px;border-radius:22px;overflow:hidden;flex:0 0 auto;
            background: rgba(2,6,23,.7);
            border:1px solid rgba(148,163,184,.22);
            box-shadow: 0 18px 40px rgba(2,6,23,.55);
        }
        .server-ico img{width:100%;height:100%;object-fit:cover;display:block}
        .title-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
        .server-title{font-size:20px;font-weight:900;letter-spacing:.01em}
        .badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
        .badge{
            font-size:10px;padding:3px 9px;border-radius:999px;
            border:1px solid rgba(148,163,184,.28);
            background: rgba(2,6,23,.35);
            color: #e5e7eb;
            text-transform:uppercase;letter-spacing:.08em;font-weight:800;
        }
        .b-prem{border-color: rgba(250,204,21,.55); background: rgba(250,204,21,.12); color:#fde68a}
        .b-elite{border-color: rgba(96,165,250,.60); background: rgba(59,130,246,.16); color:#dbeafe}
        .b-vip{border-color: rgba(96,165,250,.55); background: rgba(59,130,246,.14); color:#bfdbfe}
        .b-vipplus{border-color: rgba(167,139,250,.65); background: rgba(46,163,120,.14); color:#9be3c4}
        .b-ultra{border-color: rgba(249,115,22,.72); background: linear-gradient(90deg, rgba(249,115,22,.16), rgba(251,191,36,.18)); color:#fff7ed; box-shadow: 0 0 14px rgba(249,115,22,.16)}
        .b-verif{border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.14); color:#bbf7d0}
        .b-part{border-color: rgba(46,163,120,.55); background: rgba(46,163,120,.14); color:#f5d0fe}
        .b-mini-part{border-color: rgba(56,189,248,.62); background: rgba(56,189,248,.14); color:#bae6fd}
        .b-donator{border-color: rgba(244,114,182,.48); background: rgba(236,72,153,.14); color:#fdf2f8}
        .donator-strip{margin:10px auto 0;max-width:1120px;padding:0 16px;}
        .donator-strip-inner{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border:1px solid rgba(244,114,182,.16);background:rgba(15,23,42,.72);border-radius:16px;}
        .donator-strip-title{color:#fbcfe8;font-weight:900;text-decoration:none;}
        .donator-pill{padding:6px 10px;border-radius:999px;border:1px solid rgba(244,114,182,.24);background:rgba(236,72,153,.12);color:#fdf2f8;font-size:12px;font-weight:700;}
        .b-new{border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.14); color:#bbf7d0}
        .b-nsfw{border-color: rgba(239,68,68,.65); background: rgba(239,68,68,.14); color:#fecaca}

        .meta{
            display:flex;flex-wrap:wrap;gap:10px;align-items:center;
            color: var(--muted);font-size:12px;
            margin-bottom:10px;
        }
        .meta .dot{opacity:.6}
        .desc{color:#d1d5db;font-size:13px;line-height:1.7}
        .desc-full{
            color:#e5e7eb;
            font-size:13px;
            line-height:1.85;
            padding:12px;
            border-radius:16px;
            border:1px solid rgba(148,163,184,.14);
            background: rgba(2,6,23,.30);
            white-space: normal;
            word-break: break-word;
        }
        .desc-full a{ color:#93c5fd; text-decoration: underline; }


        /* Layout */
        .grid{
            margin-top:14px;
            display:grid;
            grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr);
            gap:16px;
            align-items:start;
        }

        .card{
            border-radius:18px;
            border:1px solid rgba(148,163,184,.18);
            background: rgba(15,23,42,.72);
            box-shadow: 0 18px 44px rgba(2,6,23,.45);
            padding:14px;
        }
        .card h3{margin:0 0 8px;font-size:14px;font-weight:800;letter-spacing:.01em}
        .sub{font-size:12px;color:var(--muted);margin-top:4px}

        /* Stats */
        .stats{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px;margin-top:12px}
        .stat{
            border-radius:16px;
            padding:10px;
            border:1px solid rgba(148,163,184,.16);
            background:
                radial-gradient(circle at 20% 0, rgba(59,130,246,.18), transparent 55%),
                rgba(2,6,23,.35);
        }
        .stat .k{font-size:11px;color:var(--muted)}
        .stat .v{margin-top:3px;font-size:16px;font-weight:900}
        .stat .hint{margin-top:4px;font-size:10px;color:rgba(148,163,184,.85)}

        /* Actions */
        .btn{
            width:100%;
            border:none;
            border-radius:16px;
            padding:10px 12px;
            font-size:13px;
            font-weight:700;
            cursor:pointer;
            display:flex;align-items:center;justify-content:center;gap:8px;
            background: rgba(2,6,23,.35);
            border:1px solid rgba(148,163,184,.18);
            color: var(--text);
        }
        .btn:hover{filter:brightness(1.05)}
        .btn.primary{background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(34,197,94,.92)); border:none; box-shadow: 0 16px 30px rgba(34,197,94,.18)}
        .btn.outline{border-color: rgba(59,130,246,.38)}
        .btn.danger{border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10)}
        .btn.small{padding:9px 10px;border-radius:14px;font-size:12px}

        .action-grid{display:grid;grid-template-columns:1fr;gap:10px}

        .copyline{
            display:flex;gap:8px;align-items:center;flex-wrap:wrap;
            padding:10px;border-radius:16px;border:1px solid rgba(148,163,184,.14);
            background: rgba(2,6,23,.30);
        }
        .copyline code{font-size:11px;color:#cbd5f5;background: rgba(2,6,23,.45);border:1px solid rgba(148,163,184,.16);padding:6px 8px;border-radius:12px;max-width:100%;overflow:auto}
        .copyline .mini{margin-left:auto;display:flex;gap:8px}

        /* Details */
        .kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .kv .item{border:1px solid rgba(148,163,184,.14);background: rgba(2,6,23,.30);border-radius:16px;padding:10px}
        .kv .k{font-size:11px;color:var(--muted)}
        .kv .v{margin-top:4px;font-size:13px;font-weight:800}

        /* Reviews */
        .review{
            border-radius:16px;border:1px solid rgba(148,163,184,.14);
            background: rgba(2,6,23,.30);
            padding:10px;margin-top:8px;
        }
        .review-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
        .review-user{font-weight:900;font-size:12px}
        .review-date{font-size:11px;color:var(--muted)}
        .stars{font-size:12px;color:#facc15;margin-top:4px}
        .review-body{margin-top:6px;font-size:12px;color:#e5e7eb;line-height:1.55}

        /* Forms */
        .field{display:flex;flex-direction:column;gap:6px;margin-top:8px}
        label{font-size:12px;color:var(--muted)}
        select,textarea,input{
            width:100%;
            border-radius:14px;
            border:1px solid rgba(148,163,184,.18);
            background: rgba(2,6,23,.35);
            color: var(--text);
            padding:10px 10px;
            font-size:13px;
            outline:none;
        }
        textarea{resize:vertical;min-height:88px}

        .tabs-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;margin-bottom:14px}
        .tab-btn{width:auto;padding:10px 14px;border-radius:999px;background:rgba(2,6,23,.32);border:1px solid rgba(148,163,184,.18);color:var(--text);font-size:13px;font-weight:800;cursor:pointer}
        .tab-btn:hover{filter:brightness(1.06)}
        .tab-btn.is-active{background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(34,197,94,.18));border-color:rgba(59,130,246,.42);box-shadow:0 12px 26px rgba(2,6,23,.28)}
        .tab-panel{display:none}
        .tab-panel.is-active{display:block}
        .section-stack{display:flex;flex-direction:column;gap:16px}
        .stats-paywall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
        .stats-plan{border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(2,6,23,.22));border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px}
        .stats-plan.plus{border-color:rgba(250,204,21,.34);box-shadow:0 22px 48px rgba(250,204,21,.08)}
        .stats-plan .price{font-size:28px;font-weight:950;letter-spacing:-.04em}.stats-plan .price small{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:0}
        .stats-plan ul{margin:0;padding-left:18px;color:#dbeafe;font-size:13px;line-height:1.7}.stats-plan li{margin:0}
        .stats-plan form{margin-top:auto}.stats-plan .btn{width:100%;justify-content:center}
        .stats-duration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:auto}
        .stats-duration-buy{border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.35);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:7px}
        .stats-duration-buy .duration-title{font-weight:950;color:#fff;font-size:13px}.stats-duration-buy .duration-price{font-weight:950;font-size:18px;color:#fff}.stats-duration-buy .duration-sub{font-size:11px;color:var(--muted);line-height:1.35}.stats-duration-buy .discount{display:inline-flex;align-self:flex-start;border-radius:999px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.28);padding:2px 7px;font-size:11px;color:#bbf7d0;font-weight:900}
        .stats-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
        .stats-kpi{padding:14px;border-radius:18px;border:1px solid rgba(148,163,184,.15);background:rgba(2,6,23,.30)}
        .stats-kpi .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.stats-kpi .v{margin-top:6px;font-size:24px;font-weight:950}.stats-kpi .s{margin-top:4px;font-size:11px;color:rgba(203,213,225,.78)}
        .stats-bars{display:flex;align-items:end;gap:6px;min-height:120px;margin-top:12px;padding:12px;border-radius:18px;border:1px solid rgba(148,163,184,.14);background:rgba(2,6,23,.24);overflow:auto}
        .stats-bar{min-width:16px;border-radius:999px 999px 6px 6px;background:linear-gradient(180deg,rgba(96,165,250,.86),rgba(34,197,94,.62));position:relative}.stats-bar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap}
        .stats-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.stats-list .row{padding:12px;border-radius:16px;background:rgba(2,6,23,.28);border:1px solid rgba(148,163,184,.13);display:flex;justify-content:space-between;gap:12px}.stats-list .row strong{color:#fff}.stats-locked{border:1px dashed rgba(250,204,21,.36);background:rgba(250,204,21,.08);border-radius:18px;padding:14px;margin-top:12px;color:#fde68a}
        .card-sep{margin-top:14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.14)}

        /* Similar */
        .similar{margin-top:16px}
        .sim-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
        .sim{
            border-radius:18px;
            border:1px solid rgba(148,163,184,.16);
            background: rgba(15,23,42,.65);
            overflow:hidden;
        }
        .sim-top{height:92px;background: rgba(2,6,23,.45);position:relative}
        .sim-top img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
        .sim-ico{position:absolute;left:10px;bottom:-18px;width:44px;height:44px;border-radius:14px;overflow:hidden;border:1px solid rgba(148,163,184,.22);background: rgba(2,6,23,.7)}
        .sim-ico img{width:100%;height:100%;object-fit:cover;display:block}
        .sim-body{padding:26px 10px 10px}
        .sim-name{font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .sim-desc{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.45;min-height:34px}
        .sim-foot{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
        .chip{font-size:10px;padding:3px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.18);background: rgba(2,6,23,.35);color:#e5e7eb}
        .chip.blue{border-color:rgba(96,165,250,.55); background:rgba(59,130,246,.14); color:#dbeafe}
    .chip.gold{border-color: rgba(250,204,21,.35); background: rgba(250,204,21,.10); color:#fde68a}
        .chip.green{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color:#bbf7d0}

        /* Scroll button */
        .scrollTop{
            position:fixed;right:18px;bottom:18px;
            width:38px;height:38px;border-radius:999px;
            border:1px solid rgba(148,163,184,.25);
            background: rgba(2,6,23,.55);
            color:#e5e7eb;
            display:flex;align-items:center;justify-content:center;
            cursor:pointer;
            box-shadow: 0 18px 44px rgba(2,6,23,.55);
            opacity:0;pointer-events:none;transform: translateY(6px);
            transition: opacity .18s ease, transform .18s ease;
        }
        .scrollTop.visible{opacity:1;pointer-events:auto;transform: translateY(0)}
        .scrollTop:hover{transform: translateY(-2px)}

        /* Responsive */
        @media (max-width: 980px){
            .grid{grid-template-columns:1fr;}
            .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
            .sim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        }
        @media (max-width: 520px){
            .hero-inner{flex-direction:column}
            .server-ico{width:76px;height:76px;border-radius:20px}
            .stats{grid-template-columns:1fr}
            .kv{grid-template-columns:1fr}
            .sim-grid{grid-template-columns:1fr}
        }

        /* VIPPLUS_SERVER_BG_SAFE */
        body.has-vip-srv-bg::before{
            content:"";
            position:fixed;
            inset:0;
            background: var(--vip-srv-bg) center/cover no-repeat;
            background-attachment: fixed;
            opacity:.68;
            filter: saturate(1.08) contrast(1.06);
            pointer-events:none;
            z-index:0;
        }
        body.has-vip-srv-bg::after{
            content:"";
            position:fixed;
            inset:0;
            background:
                radial-gradient(circle at 20% 15%, rgba(59,130,246,.10), transparent 60%),
                radial-gradient(circle at 80% 85%, rgba(34,197,94,.08), transparent 60%),
                linear-gradient(180deg, rgba(2,6,23,.35), rgba(2,6,23,.60));
            pointer-events:none;
            z-index:0;
        }
        main.wrap{ position:relative; z-index:1; }

        /* SIMILAR_SERVER_BG (VIP+) */
        .sim.has-bg{
            position: relative;
            background:
                linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.86)),
                var(--sim-bg) center/cover no-repeat !important;
        }
        .sim.has-bg::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 18%, rgba(59,130,246,.16), transparent 55%),
                radial-gradient(circle at 80% 90%, rgba(34,197,94,.12), transparent 55%);
            pointer-events:none;
            z-index:0;
        }
        .sim.has-bg > *{ position: relative; z-index: 1; }
    

/* Patch lisibilité bouton Rejoindre sur la fiche serveur */
a.btn.btn-join-server-page,
body.theme-light a.btn.btn-join-server-page {
  background: #22c55e !important;
  background-image: none !important;
  color: #000000 !important;
  border: 1px solid #16a34a !important;
  text-shadow: none !important;
  box-shadow: 0 12px 24px rgba(34,197,94,.28) !important;
  font-weight: 900 !important;
}
a.btn.btn-join-server-page:hover,
body.theme-light a.btn.btn-join-server-page:hover {
  background: #16a34a !important;
  background-image: none !important;
  color: #000000 !important;
  border-color: #15803d !important;
  filter: none !important;
}