/* ===== HERO ===== */

.commands-hero{
padding:90px 0 60px;
text-align:center;
}

.commands-hero h1{
font-size:56px;
color:#53FC18;
margin-bottom:15px;
}

.commands-hero p{
font-size:22px;
color:var(--gray);
max-width:700px;
margin:auto;
}


/* ===== TOP BAR ===== */

.top-bar{
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
margin-bottom:40px;
flex-wrap:wrap;
}

#search{
flex:1;
min-width:260px;
padding:18px;
font-size:18px;
border:none;
border-radius:16px;
background:#222;
color:white;
outline:none;
transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}

#search:focus{
box-shadow: 0 0 0 3px rgba(83,252,24,.3);
}


/* ===== STATS ===== */

.stats{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.stat{
background:#1d1d1d;
padding:18px 30px;
border-radius:16px;
text-align:center;
border:1px solid rgba(255,255,255,.05);
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}

.stat:hover{
transform: translateY(-5px) scale(1.04);
box-shadow: 0 12px 30px rgba(83,252,24,.12);
}

.stat span{
display:block;
font-size:32px;
font-weight:bold;
color:#53FC18;
}

.stat p{
margin-top:8px;
color:var(--gray);
}


/* ===== CATEGORY ===== */

.categories{
display:flex;
gap:15px;
flex-wrap:wrap;
justify-content:center;
margin-bottom:50px;
}

.category{
padding:12px 22px;
border:none;
border-radius:999px;
cursor:pointer;
background:#222;
color:white;
transition: transform .28s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease;
font-size:15px;
}

.category:hover{
transform:scale(1.08);
background:#53FC18;
color:#111;
}

.category.active{
background:#53FC18;
color:#111;
}

.category:active{
transform: scale(0.95);
}


/* ===== GRID ===== */

#commandsGrid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
gap:30px;
padding-bottom:100px;
}


/* ===== CARD ===== */

.command-card{
background: linear-gradient(180deg, #232323, #1a1a1a);
border-radius:22px;
padding:28px;
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.05);
transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}

.command-card:hover{
transform: translateY(-8px) scale(1.03);
box-shadow: 0 20px 45px rgba(83,252,24,.18);
}

.command-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:#53FC18;
}

.command-card h3{
font-size:30px;
color:#53FC18;
margin-bottom:12px;
}

.command-card p{
color:var(--gray);
line-height:1.8;
}

.tag{
display:inline-block;
margin-top:15px;
padding:8px 14px;
background:#2b2b2b;
border-radius:999px;
font-size:14px;
color:#53FC18;
transition: transform .28s cubic-bezier(.22,1,.36,1), background .25s ease;
}

.tag:hover{
transform:scale(1.06);
}


/* ===== BUTTONS ===== */

.buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:25px;
}

.buttons button{
flex:1;
padding:14px;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:bold;
transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, filter .28s ease, background .25s ease;
}

.buttons button:hover {
transform: translateY(-3px) scale(1.06);
}

.buttons button:active,
.copy:active,
.favorite:active,
.category:active {
transform: scale(0.95) !important;
transition-duration: .1s !important;
}

.copy{
background:#53FC18;
color:#111;
}

.copy:hover{
transform: translateY(-3px) scale(1.07);
box-shadow: 0 10px 25px rgba(83,252,24,.3);
}

.favorite{
background:#ff4d6d;
color:white;
}

.favorite:hover{
transform: translateY(-3px) scale(1.07);
box-shadow: 0 10px 25px rgba(255,77,109,.3);
}


/* ===== TOAST - slide up from bottom ===== */

#toast{
position:fixed;
left:50%;
bottom:28px;
transform: translateX(-50%) translateY(140%);
background:#53FC18;
color:#111;
padding:16px 28px;
border-radius:14px;
font-weight:bold;
opacity:0;
pointer-events:none;
box-shadow: 0 12px 40px rgba(83,252,24,.35);
transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
z-index:99999;
}

#toast.show{
opacity:1;
transform: translateX(-50%) translateY(0);
}


/* ===== MOBILE ===== */

@media(max-width:768px){
.commands-hero h1{
font-size:40px;
}
.top-bar{
flex-direction:column;
}
#search{
width:100%;
}
.buttons{
flex-direction:column;
}
}


/* ===== SECRET CARD ===== */

.secret-card {
border-color: rgba(255,165,0,0.25);
}

.secret-card::before {
background: linear-gradient(90deg, #ff8c00, #ffb000, #ff8c00);
}

.secret-card h3 {
color:#ff9d00;
}

.secret-card:hover {
box-shadow: 0 20px 45px rgba(255,157,0,0.18);
transform: translateY(-8px) scale(1.03);
}

.secret-card .tag {
color:#ff9d00;
}