:root{
      --bg:#000; --text:#fff; --muted:#a8a8a8;
      --violet:#a020f0; --violet-dark:#5e2d79;
      --grad:linear-gradient(45deg,var(--violet),var(--violet-dark));
      --container:1100px; --padx:1.25rem;
      --card:rgba(255,255,255,.06);
      --border:rgba(255,255,255,.12);
      --focus:0 0 0 4px rgba(160,32,240,.25);
      --ok: rgba(46, 204, 113, .14);
      --warn: rgba(241, 196, 15, .14);
      --ban: rgba(231, 76, 60, .14);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
    a{color:inherit;text-decoration:none}
    strong{color:#f0ddff}
    .muted{color:var(--muted)}

    /* NAVBAR */
    .navbar{
      position:fixed;inset:0 0 auto 0;z-index:1000;
      display:flex;align-items:center;justify-content:space-between;gap:.8rem;
      padding:1.15rem 2rem;
      background:rgba(0,0,0,.92);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(160,32,240,.22);
      transition:.25s;
    }
    .navbar.scrolled{
      padding:.85rem 2rem;
      background:rgba(0,0,0,.97);
      box-shadow:0 10px 35px rgba(160,32,240,.16);
      border-bottom-color:rgba(160,32,240,.28);
    }
    .nav-brand{
      display:flex;align-items:center;gap:.75rem;
      font-weight:900;font-size:1.35rem;
      text-transform:uppercase;letter-spacing:1px;
    }
    .nav-brand i{color:var(--violet);font-size:1.6rem;text-shadow:0 0 14px rgba(160,32,240,.6)}
    .nav-toggle{
      display:none;background:transparent;border:0;color:#fff;
      font-size:1.75rem;padding:.35rem .6rem;border-radius:12px;
      line-height:1;cursor:pointer;
    }
    .nav-toggle:focus-visible{outline:none;box-shadow:var(--focus)}
    .nav-links{
      display:flex;gap:1.25rem;align-items:center;
      background:rgba(160,32,240,.06);
      padding:.5rem 1rem;border-radius:999px;
      border:1px solid rgba(160,32,240,.14);
    }
    .nav-links a{
      color:#b8b8b8;position:relative;
      padding:.55rem .95rem;border-radius:999px;
      letter-spacing:.35px;text-transform:uppercase;
      font-weight:800;font-size:.9rem;
      transition:.25s; white-space:nowrap;
    }
    .nav-links a::before{
      content:"";position:absolute;inset:0;border-radius:999px;
      background:var(--grad);opacity:0;transition:.25s;z-index:-1;
    }
    .nav-links a:hover{color:#fff;transform:translateY(-2px);text-shadow:0 0 12px rgba(160,32,240,.25)}
    .nav-links a:hover::before{opacity:.18}
    .nav-links a.active{
      color:#f0ddff;background:rgba(160,32,240,.14);
      border:1px solid rgba(160,32,240,.18);
    }
    .nav-actions{display:flex;align-items:center;margin-left:.75rem}
    .btn-login{
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.6rem 1.05rem;border-radius:999px;
      font-weight:900;letter-spacing:.3px;
      background:transparent;
      border:1px solid rgba(160,32,240,.42);
      color:#eedcff;
      box-shadow:inset 0 0 0 1px rgba(160,32,240,.16);
      transition:.25s; white-space:nowrap;
    }
    .btn-login:hover{background:var(--grad);color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(160,32,240,.28)}
    .btn-login:focus-visible{outline:none;box-shadow:var(--focus)}
    .offset{height:92px}

    /* HERO */
    .hero{
      padding:3.1rem var(--padx) 2rem;text-align:center;
      background:
        radial-gradient(900px 360px at 50% -10%, rgba(160,32,240,.22), transparent 60%),
        linear-gradient(to bottom, rgba(0,0,0,.92), rgba(12,0,18,.92));
      border-bottom:1px solid rgba(160,32,240,.16);
    }
    .hero-inner{max-width:980px;margin:0 auto}
    .badge{
      display:inline-flex;align-items:center;gap:.55rem;
      padding:.4rem .8rem;border-radius:999px;
      border:1px solid rgba(160,32,240,.22);
      background:rgba(160,32,240,.08);
      color:#f1e3ff;font-weight:900;
      margin:0 auto 1rem;
      box-shadow:0 14px 30px rgba(0,0,0,.45);
    }
    .badge i{color:var(--violet)}
    .hero h1{
      font-size:clamp(2rem,6vw,3.05rem);
      margin-bottom:.6rem;
      background:var(--grad);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero p{color:var(--muted);font-size:clamp(1rem,2.8vw,1.12rem);margin:0 auto;max-width:900px}

    .wrap{max-width:var(--container);margin:0 auto;padding:1.25rem var(--padx) 2.6rem}

    /* TOOLBAR */
    .toolbar{
      display:flex;gap:.9rem;flex-wrap:wrap;
      align-items:center;justify-content:space-between;
      margin-top:-1.1rem;
    }
    .search{
      flex:1; min-width:min(540px, 100%);
      display:flex;align-items:center;gap:.7rem;
      padding:.9rem 1rem;
      background:linear-gradient(180deg, var(--card), rgba(255,255,255,.03));
      border:1px solid var(--border);
      border-radius:999px;
      box-shadow:0 12px 34px rgba(0,0,0,.45);
    }
    .search i{color:rgba(160,32,240,.9)}
    .search input{width:100%;background:transparent;border:0;outline:none;color:#fff;font-size:1rem}

    .chips{display:flex;gap:.55rem;flex-wrap:wrap}
    .chip{
      display:inline-flex;align-items:center;gap:.45rem;
      padding:.55rem .8rem;border-radius:999px;
      border:1px solid rgba(160,32,240,.18);
      background:rgba(160,32,240,.07);
      color:#e9d8ff;font-weight:900;font-size:.92rem;
      cursor:pointer; user-select:none;
      transition:.2s;
    }
    .chip:hover{transform:translateY(-2px);border-color:rgba(160,32,240,.28)}
    .chip.active{background:rgba(160,32,240,.16);border-color:rgba(160,32,240,.35)}

    /* ACCORDIONS */
    .block{
      margin-top:1rem;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 12px 34px rgba(0,0,0,.45);
    }
    .block + .block{margin-top:1rem}
    summary{
      cursor:pointer;list-style:none;
      padding:1.05rem 1.1rem;
      display:flex;align-items:center;justify-content:space-between;gap:1rem;
      font-weight:900;letter-spacing:.2px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    }
    summary::-webkit-details-marker{display:none}
    summary:focus-visible{outline:none;box-shadow:var(--focus)}
    .sum-left{display:flex;align-items:center;gap:.65rem}
    .sum-left i{color:var(--violet)}
    .chev{opacity:.75;transition:.2s}
    details[open] .chev{transform:rotate(180deg)}
    .body{padding:1.05rem 1.1rem;border-top:1px solid rgba(255,255,255,.10)}

    .note{
      background:rgba(0,0,0,.35);
      border:1px solid rgba(255,255,255,.10);
      border-radius:14px;
      padding:.9rem 1rem;
      color:#d8d8d8;
      margin-bottom:.9rem;
    }

    /* RULE ITEMS */
    .rules{display:grid;gap:.75rem}
    .rule{
      display:flex;gap:.85rem;align-items:flex-start;
      padding:.95rem 1rem;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.30);
      transition:.2s;
    }
    .rule:hover{border-color:rgba(160,32,240,.22);transform:translateY(-2px)}
    .rule .icon{
      width:38px;height:38px;border-radius:12px;
      display:grid;place-items:center;
      background:rgba(160,32,240,.14);
      border:1px solid rgba(160,32,240,.22);
      flex:0 0 auto;
      margin-top:.05rem;
    }
    .rule .icon i{color:#f0ddff}
    .rule h3{font-size:1.02rem;margin-bottom:.2rem}
    .rule p{color:#cfcfcf}
    .rule .meta{margin-top:.55rem;display:flex;gap:.45rem;flex-wrap:wrap}

    .tag{
      display:inline-flex;align-items:center;gap:.35rem;
      font-weight:900;font-size:.82rem;
      padding:.35rem .6rem;border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      color:#eaeaea;
    }
    .tag.ok{background:var(--ok);border-color:rgba(46,204,113,.25)}
    .tag.warn{background:var(--warn);border-color:rgba(241,196,15,.25)}
    .tag.ban{background:var(--ban);border-color:rgba(231,76,60,.25)}
    .tag i{opacity:.9}

    .empty{
      display:none;
      margin-top:1rem;
      padding:1.05rem 1.1rem;
      border-radius:16px;
      border:1px dashed rgba(255,255,255,.18);
      color:#cfcfcf;
      text-align:center;
      background:rgba(255,255,255,.03);
    }

    /* FOOTER */
    footer{
      position:relative;
      background:rgba(0,0,0,.97);
      padding:2.5rem var(--padx);
      border-top:1px solid rgba(160,32,240,.22);
      margin-top:1.2rem;
    }
    footer::before{
      content:"";
      position:absolute;top:0;left:0;right:0;height:1px;
      background:linear-gradient(90deg,transparent,rgba(160,32,240,.28),transparent);
    }
    .footer-row{
      max-width:var(--container);
      margin:0 auto;
      display:flex;align-items:center;justify-content:space-between;
      gap:1rem;flex-wrap:wrap;
    }
    .footer-links{
      display:flex;gap:1rem;flex-wrap:wrap;
      background:rgba(160,32,240,.06);
      padding:.7rem 1rem;border-radius:999px;
      border:1px solid rgba(160,32,240,.18);
    }
    .footer-links a{color:#bdbdbd;padding:.4rem .9rem;border-radius:12px;transition:.2s}
    .footer-links a:hover{color:#fff;background:rgba(160,32,240,.12)}
    .copy{color:#9e9e9e}

    @media (max-width:980px){
      .nav-toggle{display:inline-block}
      .nav-links{display:none}
      .nav-links.open{
        display:grid;position:absolute;
        top:calc(100% + 8px);right:12px;left:12px;
        gap:.6rem;padding:.8rem;border-radius:16px;
        background:rgba(16,16,16,.96);
        border:1px solid rgba(160,32,240,.22);
        box-shadow:0 12px 32px rgba(160,32,240,.18);
      }
      .nav-links.open a{display:block;border-radius:12px}
      .search{min-width:100%}
    }
    @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}