*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#08050b;color:#fff;font-family:Arial,Helvetica,sans-serif;min-height:100vh;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-5;background-image:url("assets/background.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;opacity:.42}
.veil{position:fixed;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(170,55,255,.27),transparent 38%),linear-gradient(90deg,rgba(20,6,29,.82),rgba(7,4,10,.52),rgba(20,6,29,.82));box-shadow:inset 0 0 180px #000,inset 0 -100px 150px #000}
.nav{width:min(1120px,94%);height:66px;margin:16px auto 0;padding:0 13px;display:flex;align-items:center;gap:28px;border:1px solid rgba(205,116,255,.20);border-radius:11px;background:rgba(7,5,11,.78);backdrop-filter:blur(14px);box-shadow:0 0 45px rgba(154,46,240,.13);position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:12px;white-space:nowrap}.brand small{color:#8d8294;font-weight:500}.brandD,.bigD{display:grid;place-items:center;background:linear-gradient(145deg,#d67aff,#6e22aa);box-shadow:0 0 28px rgba(172,57,255,.58);font-weight:900}.brandD{width:30px;height:30px;border-radius:8px}
.nav nav{display:flex;gap:23px;flex:1}.nav nav a{color:#918697;text-decoration:none;font-size:9px}.nav nav a:hover{color:#fff}
.discord,.download{color:#fff;text-decoration:none;border:1px solid rgba(218,128,255,.24);border-radius:7px;background:linear-gradient(135deg,#963ce1,#65209d);box-shadow:0 0 24px rgba(157,51,255,.30);font-weight:800}.discord{padding:10px 12px;font-size:9px}
.hero{height:320px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:650px;height:120px;bottom:-85px;background:#a92fff;filter:blur(80px);opacity:.30}.heroCenter{z-index:2}.bigD{width:50px;height:50px;margin:auto;border-radius:13px;font-size:25px;animation:float 4s ease-in-out infinite}.hub{font-size:14px;font-weight:800;margin-top:8px;color:#ddd5e3}.hero h1{margin:7px 0 4px;line-height:.8;letter-spacing:-5px}.hero h1 span{display:block;font-size:57px;background:linear-gradient(#fff,#c6c0ca);-webkit-background-clip:text;color:transparent}.hero h1 b{display:block;font-size:61px;background:linear-gradient(90deg,#7220b5,#e68fff,#7b23bc);-webkit-background-clip:text;color:transparent;text-shadow:0 0 35px rgba(183,57,255,.35)}.hero p{margin:10px 0;color:#bc82da;font-size:13px;font-weight:700}.money{position:absolute;left:24%;top:68px;font-size:98px;font-weight:900;color:rgba(163,48,229,.23);transform:rotate(-12deg);text-shadow:0 0 35px #b73cff}.code{position:absolute;color:#d6b5df;opacity:.22;font:9px/1.65 monospace;text-align:left}.code1{left:7%;top:25px}.code2{right:5%;top:10px}
@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}
.particles i{position:fixed;width:3px;height:3px;border-radius:50%;background:#e0a1ff;box-shadow:0 0 12px #bf4cff,0 0 24px #9326dc;animation:rise linear infinite;z-index:-2}@keyframes rise{from{transform:translateY(105vh)}to{transform:translateY(-10vh) translateX(90px)}}
.wrap{width:min(1120px,94%);margin:auto;padding:18px 0}.title{font-size:13px;font-weight:800;margin-bottom:11px}.title small{color:#746a7c;font-size:9px;font-weight:400;margin-left:7px}
.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.category{height:65px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:linear-gradient(145deg,rgba(37,19,49,.95),rgba(12,8,16,.96));transition:.25s;cursor:pointer;overflow:hidden}.category:hover{transform:translateY(-4px);border-color:rgba(190,105,255,.40);box-shadow:0 0 30px rgba(155,48,245,.18)}.category b{font-size:10px}.category small{display:block;margin-top:7px;color:#756b7d;font-size:8px}
.tools{display:flex;gap:7px;margin-bottom:12px}.tools input{width:245px;padding:9px 11px;background:#0b080f;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:7px;outline:none;font-size:9px}.tools input:focus{border-color:rgba(190,93,255,.5);box-shadow:0 0 20px rgba(160,50,255,.16)}#filters{display:flex;gap:5px;flex-wrap:wrap}.filter{padding:8px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#8a8091;font-size:8px;cursor:pointer}.filter.active,.filter:hover{color:#fff;background:rgba(156,51,255,.12);border-color:rgba(190,105,255,.35)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.card{padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:linear-gradient(145deg,rgba(34,20,44,.96),rgba(11,8,15,.97));box-shadow:0 12px 35px rgba(0,0,0,.55);transition:.25s;overflow:hidden}.card:hover{transform:translateY(-5px);border-color:rgba(195,105,255,.36);box-shadow:0 15px 45px #000,0 0 28px rgba(157,50,255,.17)}.preview{height:102px;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:6px;background:radial-gradient(circle at 72% 18%,rgba(187,67,255,.30),transparent 43%),#100b15;overflow:hidden}.preview pre{margin:0;white-space:pre-wrap;font:7px/1.55 monospace;color:#b99cc9}.tag{display:inline-block;margin-top:8px;padding:4px 6px;border-radius:5px;background:rgba(164,58,255,.07);border:1px solid rgba(174,72,255,.14);color:#bd6eff;font-size:7px}.card h3{font-size:11px;margin:7px 0 4px}.desc{height:24px;overflow:hidden;color:#746b7b;font-size:8px}.bottom{display:flex;justify-content:space-between;align-items:center;margin-top:9px}.author{color:#948a9c;font-size:7px}.buttons{display:flex;gap:4px}.buttons button{padding:6px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:#ffffff05;color:#a59baa;font-size:7px;cursor:pointer}.buttons button:last-child{color:#fff;background:linear-gradient(135deg,#a43eff,#7020b4);border-color:rgba(208,125,255,.2);box-shadow:0 0 15px rgba(156,55,255,.24)}footer{width:min(1120px,94%);margin:30px auto 0;padding:30px 0 45px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;color:#766c7d;font-size:8px}footer strong{color:#fff;font-size:10px}footer p{margin:7px 0}
.modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modalShade{position:absolute;inset:0;background:rgba(3,2,5,.88);backdrop-filter:blur(9px)}.modalBox{position:relative;width:min(800px,100%);padding:22px;background:#100a15;border:1px solid rgba(197,108,255,.30);border-radius:12px;box-shadow:0 0 100px rgba(163,56,255,.25)}.x{position:absolute;right:12px;top:7px;border:0;background:none;color:#aaa;font-size:25px;cursor:pointer}.modalBox>span{color:#bd68ff;font-size:8px}.modalBox h2{font-size:20px;margin:7px 0}.modalBox p{font-size:9px;color:#82788d}.modalBox pre{max-height:350px;overflow:auto;padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#07050a;color:#d3b6e6;font:10px/1.7 monospace}.download{padding:10px 13px;border:0;font-size:9px;cursor:pointer}
@media(max-width:800px){.nav nav{display:none}.nav{justify-content:space-between}.categories,.grid{grid-template-columns:repeat(2,1fr)}.code{display:none}.money{left:5%}}@media(max-width:520px){.categories,.grid{grid-template-columns:1fr}.hero h1 span{font-size:45px}.hero h1 b{font-size:48px}.tools{display:block}.tools input{width:100%;margin-bottom:7px}footer{grid-template-columns:1fr}}
/* =========================================
DUX LOGIN BOX
========================================= */
#userAuth {
display: flex;
align-items: center;
justify-content: flex-end;
}
/* =========================================
LOGIN BUTTON
========================================= */
.loginButton {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
height: 40px;
padding: 0 20px;
box-sizing: border-box;
border-radius: 9px;
text-decoration: none;
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
background:
linear-gradient(
135deg,
#b14cff,
#7b20c7
);
border:
1px solid
rgba(211,137,255,.6);
box-shadow:
0 0 12px
rgba(164,62,255,.65),
0 0 28px
rgba(164,62,255,.4),
0 0 50px
rgba(164,62,255,.18);
transition:
transform .25s,
box-shadow .25s,
filter .25s;
}
.loginButton:hover {
transform:
translateY(-2px);
filter:
brightness(1.15);
box-shadow:
0 0 18px
rgba(188,94,255,.9),
0 0 40px
rgba(164,62,255,.55),
0 0 70px
rgba(164,62,255,.25);
}
.loginIcon {
font-size: 13px;
color: #ffffff;
}
/* =========================================
LOGGED USER BOX
========================================= */
.userBox {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding:
0 8px
0 7px
0 10px;
border-radius: 10px;
background:
linear-gradient(
135deg,
rgba(177,76,255,.95),
rgba(101,25,174,.95)
);
border:
1px solid
rgba(215,153,255,.55);
box-shadow:
0 0 14px
rgba(164,62,255,.65),
0 0 30px
rgba(164,62,255,.38),
0 0 55px
rgba(164,62,255,.16);
transition:
transform .25s,
box-shadow .25s;
}
.userBox:hover {
transform:
translateY(-2px);
box-shadow:
0 0 20px
rgba(190,100,255,.9),
0 0 42px
rgba(164,62,255,.55);
}
/* =========================================
USER AVATAR
========================================= */
.userAvatar {
width: 29px;
height: 29px;
min-width: 29px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
rgba(255,255,255,.18);
border:
1px solid
rgba(255,255,255,.28);
box-shadow:
inset
0 0 10px
rgba(255,255,255,.12);
}
.userAvatar svg {
width: 17px;
height: 17px;
fill: none;
stroke: #ffffff;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================
USER NAME
========================================= */
.userName {
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: .2px;
}
/* =========================================
LOGOUT BUTTON
========================================= */
.logoutButton {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
border:
1px solid
rgba(255,255,255,.2);
background:
rgba(0,0,0,.13);
color: #ffffff;
font-size: 14px;
cursor: pointer;
transition:
.2s;
}
.logoutButton:hover {
background:
rgba(0,0,0,.3);
transform:
scale(1.08);
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 700px) {
.userName {
max-width: 75px;
}
.loginButton {
padding:
0 12px;
}
}
/* =========================
AUTH NAVBAR
========================= */
#userAuth{
display:flex;
align-items:center;
gap:7px;
margin-left:auto;
}
.loginButton,
.userBox,
.logoutButton{
height:36px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-family:inherit;
font-size:9px;
font-weight:700;
}
.loginButton{
gap:7px;
padding:0 13px;
color:#fff;
text-decoration:none;
border:1px solid rgba(218,128,255,.24);
background:linear-gradient(135deg,#963ce1,#65209d);
box-shadow:0 0 24px rgba(157,51,255,.30);
}
.loginIcon{
font-size:13px;
line-height:1;
}
.userBox{
gap:8px;
padding:0 12px;
color:#fff;
border:1px solid rgba(205,116,255,.22);
background:linear-gradient(145deg,rgba(35,19,46,.95),rgba(11,8,15,.96));
box-shadow:0 0 20px rgba(157,51,255,.12);
}
.userIcon{
width:19px;
height:19px;
display:grid;
place-items:center;
border-radius:50%;
background:linear-gradient(135deg,#a43eff,#7020b4);
color:#fff;
font-size:13px;
line-height:1;
}
.userName{
max-width:130px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.logoutButton{
padding:0 13px;
border:1px solid rgba(255,75,92,.45);
background:linear-gradient(135deg,#e83b4e,#a8182a);
color:#fff;
cursor:pointer;
box-shadow:0 0 18px rgba(232,59,78,.18);
transition:.2s;
}
.logoutButton:hover{
transform:translateY(-1px);
filter:brightness(1.1);
box-shadow:0 0 24px rgba(232,59,78,.30);
}
@media(max-width:700px){
.nav{gap:12px}
.nav nav{gap:12px}
.userName{max-width:75px}
.userBox{padding:0 9px}
.logoutButton{padding:0 10px}
}
@media(max-width:520px){
.nav{
height:auto;
min-height:66px;
flex-wrap:wrap;
padding:10px;
}
.nav nav{
order:3;
width:100%;
justify-content:center;
padding-bottom:3px;
}
#userAuth{
margin-left:auto;
}
}
/* Layout base per desktop */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.nav-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
/* Regole Mobile (sotto i 768px) */
@media (max-width: 768px) {
.navbar {
flex-direction: column; /* Dispone logo e link in verticale */
align-items: center;
padding: 1rem;
}
.nav-links {
flex-direction: column; /* Dispone i link uno sotto l'altro */
width: 100%;
text-align: center;
gap: 0.8rem;
margin-top: 1rem;
}
.nav-links li a {
display: block;
padding: 0.5rem 0;
}
}