*{ margin:0; padding:0; box-sizing:border-box; }
        html{ scroll-behavior:smooth; }
        body{
            font-family:'Poppins',sans-serif;
            background: linear-gradient(180deg, #12090a 0%, #1b0d10 35%, #090d1d 100%);
            background-attachment:fixed;
            color:#fff;
            overflow-x:hidden;
        }
        
        /* GŁÓWNY PASEK PRZEWIJANIA (Wszędzie) */
        ::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
        ::-webkit-scrollbar-thumb { background: #ff7a00 !important; border-radius: 10px !important; }
        ::-webkit-scrollbar-track { background: #12090a !important; border-radius: 10px !important; border: 1px solid rgba(255,140,0,0.1) !important;}
        
        body::before {
            content:"";
            position:fixed;
            inset:0;
            background: radial-gradient(circle at bottom center, rgba(30,10,0,0.8) 0%, #0a080c 60%);
            z-index:-3;
        }
        
        /* Opcja 2: Latarnia z myszki */
        .mouse-glow {
            position: fixed;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(255, 120, 0, 0.08) 0%, rgba(255, 60, 0, 0.03) 30%, transparent 60%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: -1;
            mix-blend-mode: screen;
        }

        /* Opcja 1: Żar / Popiół */
        .ember-container {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -2;
            overflow: hidden;
        }

        .ambient-ember {
            position: absolute;
            bottom: -20px;
            background: #ffb347;
            border-radius: 50%;
            box-shadow: 0 0 10px 2px #ff6b00, 0 0 20px 4px rgba(255, 0, 0, 0.5);
            opacity: 0;
            animation: emberFloat linear infinite;
        }

        @keyframes emberFloat {
            0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
            10% { opacity: 0.8; }
            50% { transform: translateY(-50vh) translateX(40px) scale(0.8); opacity: 0.6; }
            90% { opacity: 0; }
            100% { transform: translateY(-100vh) translateX(-40px) scale(0.5); opacity: 0; }
        }
        header{
            width:100%;
            padding:24px 5%;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:30px;
            position:sticky;
            top:0;
            z-index:999;
            backdrop-filter:blur(18px);
            background: rgba(7,7,15,.45);
            border-bottom: 1px solid rgba(255,255,255,.06);
            position: relative; /* Dla latarni */
        }
        
        /* EFEKT LATARNI (Płomienie i iskry) */
        .lantern-glow {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
            border-radius: inherit;
        }
        .lantern-glow::before, .lantern-glow::after {
            content: "";
            position: absolute;
            top: -20px;
            width: 250px;
            height: 120px;
            background: radial-gradient(ellipse at center, rgba(255, 120, 0, 0.20) 0%, transparent 60%);
            animation: lanternFlicker 4s infinite alternate;
            border-radius: 50%;
        }
        .lantern-glow::before {
            left: 2%;
            animation-delay: 0s;
        }
        .lantern-glow::after {
            right: 2%;
            animation-delay: -1.5s;
        }
        .lantern-sparks {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        }
        .spark {
            position: absolute;
            bottom: -5px;
            width: 3px;
            height: 3px;
            background: #ffcf6b;
            border-radius: 50%;
            box-shadow: 0 0 10px 2px #ff7b00;
            animation: sparkRise 3s infinite ease-in;
            opacity: 0;
        }
        @keyframes lanternFlicker {
            0% { opacity: 0.6; transform: scale(0.9) translateY(2px); }
            20% { opacity: 0.8; transform: scale(1.05) translateY(-1px); }
            40% { opacity: 0.5; transform: scale(0.95) translateY(1px); }
            60% { opacity: 0.9; transform: scale(1.1) translateY(-2px); }
            80% { opacity: 0.7; transform: scale(0.98) translateY(0); }
            100% { opacity: 0.5; transform: scale(0.9) translateY(1px); }
        }
        @keyframes sparkRise {
            0% { transform: translateY(0) scale(1); opacity: 0; }
            20% { opacity: 0.8; }
            80% { opacity: 0; transform: translateY(-40px) scale(0.5); }
            100% { transform: translateY(-60px) scale(0); opacity: 0; }
        }
        .logo-area{ display:flex; align-items:center; gap:18px; }
        .logo-img{ width:64px; height:64px; border-radius:18px; object-fit:cover; box-shadow: 0 0 30px rgba(255,120,0,.45); }
        .logo{
            font-family:'Cinzel',serif;
            font-size:38px;
            font-weight:800;
            letter-spacing:4px;
            background: linear-gradient(135deg, #ffcf6b, #ff7b2c, #ff3b1d);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        nav{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
        nav a{ text-decoration:none; color:#fff; font-weight:600; transition:.25s; position:relative; font-size:17px; }
        nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0%; height:2px; background:#ff7b2c; transition:.25s; }
        nav a:hover{ color:#ffb347; }
        nav a:hover::after{ width:100%; }
        .admin-toggle{
            width:52px; height:52px; border-radius:18px; display:flex; align-items:center; justify-content:center;
            text-decoration:none; font-size:24px; transition:.25s; border: 1px solid rgba(255,140,0,.18);
            background: rgba(255,255,255,.04); box-shadow: 0 0 15px rgba(255,120,0,.08);
        }
        .admin-toggle:hover{ transform: translateY(-3px); background: rgba(255,140,0,.10); }
        .admin-toggle.active{
            background: linear-gradient(135deg, #ff7b00, #ff3d00);
            border: 1px solid rgba(255,180,80,.45);
            box-shadow: 0 0 25px rgba(255,120,0,.45), 0 0 50px rgba(255,60,0,.25);
            animation: adminGlow 2s infinite;
        }
        @keyframes adminGlow{
            0%, 100%{ box-shadow: 0 0 25px rgba(255,120,0,.45), 0 0 50px rgba(255,60,0,.25); }
            50%{ box-shadow: 0 0 35px rgba(255,160,0,.7), 0 0 70px rgba(255,90,0,.35); }
        }

        .discord-login{
            height:58px; padding:0 26px; border-radius:18px; display:flex; align-items:center; gap:14px;
            text-decoration:none; background: linear-gradient(135deg, #3b1d5e, #6b2a6d);
            color:#fff; font-weight:700; transition:.25s;
        }
        
        .lang-selector { display:flex; gap:10px; align-items:center; margin-right:20px; }
        .lang-selector a { font-size:24px; text-decoration:none; opacity:0.5; transition:0.3s; line-height:1; display:flex; align-items:center; }
        .lang-selector a:hover { opacity:0.8; transform:scale(1.1); }
        .lang-selector a.active { opacity:1; filter:drop-shadow(0 0 10px rgba(255,120,0,0.6)); transform:scale(1.1); }
        
        .user-panel{ display:flex; align-items:center; gap:16px; }
        .avatar{ width:52px; height:52px; border-radius:50%; border:2px solid #ff7b00; object-fit:cover; }
        .user-info{ display:flex; flex-direction:column; justify-content: center;}
        .username{ font-weight:700; color:#fff; }
        .role{ font-size:13px; font-weight:700; text-transform: capitalize; }
        .role-szef, .role-head{ color:#3b82f6; } /* Szef: niebieski z obrazka */
        .role-helper{ color:#ffe1eb; } /* Helper: jasny różowy/biały z obrazka */
        .role-reprezentant, .role-deputy{ color:#740000; }
        .role-zarzadca, .role-keeper{ color:#369876; }
        .role-zastepca{ color:#ff9d42; }
        .role-czlonek, .role-member{ color:#fbb040; }
        .role-czlonek--probny-, .role-czlonek-(probny){ color:#f6ff00; }
        .role-liderek, .role-raid-host{ color:#4d153c; font-weight:800; }
        .logout-btn{ padding:14px 22px; border-radius:14px; text-decoration:none; background:#ff4b4b; color:#fff; font-weight:700; transition:.25s; }
        .logout-btn:hover{ transform: translateY(-3px); }
        
        @media(max-width:1200px){
            header{ flex-direction:column; }
            nav{ justify-content:center; }
        }
        th { cursor: pointer; position: relative; user-select: none; }
        th[data-sort-dir="asc"]::after { content: " \25B2"; color: #ffb347; font-size: 10px; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
        th[data-sort-dir="desc"]::after { content: " \25BC"; color: #ffb347; font-size: 10px; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }

@media (max-width: 768px) {
    .mouse-glow { display: none !important; }
    .ambient-ember { filter: none !important; box-shadow: 0 0 5px 1px #ff6b00 !important; }
}