/* commands.css – Bot commands page */

/* Layout */
.content-wrapper { max-width: 1100px; }

/* ===== Promo / Hero ===== */
.promo { padding-top: 1.25rem; padding-bottom: .5rem; }

.promo-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(180deg, #161616 0%, #121212 100%);
    border: 1px solid #2f2f2f;
    box-shadow:
            0 6px 24px rgba(0,0,0,.35),
            inset 0 0 20px rgba(255,0,77,0.06);
    overflow: hidden;
    border-radius: 14px;
}

.scanline {
    position: absolute;
    left: -50%;
    right: -50%;
    top: 0; bottom: 0;
    background: radial-gradient(60% 60% at 50% 0%,
    rgba(255,0,77,0.10) 0%,
    rgba(255,0,77,0.03) 35%,
    transparent 70%);
    pointer-events: none;
}

.eyebrow {
    font-weight: 800;
    color: #ff395f;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .25rem;
    text-shadow: 0 0 6px rgba(255,0,77,.7);
}

.promo-title {
    margin: 0;
    color: #fff;
    font-size: 1.35rem;
}

.promo-sub {
    color: #bdbdbd;
    margin-top: .35rem;
}

.btn-live {
    display: inline-block;
    align-self: center;
    padding: .6rem 1.1rem;
    background: #0f0f0f;
    color: #ff5a7a;
    border: 1px solid #333;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow:
            0 0 12px rgba(255,0,77,.22),
            inset 0 0 10px rgba(255,0,77,.12);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-live:hover {
    transform: translateY(-1px);
    background: #151515;
    box-shadow:
            0 0 18px rgba(255,0,77,.32),
            inset 0 0 12px rgba(255,0,77,.18);
}

/* ===== Commands ===== */
.intro { margin: .75rem 0 1rem; color: #ccc; }

.command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.command-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    position: relative;
    box-shadow:
            0 6px 24px rgba(0,0,0,.35),
            0 0 20px rgba(255, 0, 77, 0.06);
}

.command-card h3 { color: #e6e6e6; margin: 0 0 .45rem; line-height: 1.3; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.command-card .desc { color: #bdbdbd; margin-bottom: .6rem; }
.syntax { color: #ddd; }
.notes { margin-top: .5rem; padding-left: 1.2rem; color: #aaa; }

.cmd { color: #ff395f; text-shadow: 0 0 6px rgba(255,0,77,.7); }

/* Badges */
.badge {
    display:inline-block;
    font-size:.72rem;
    border:1px solid #333;
    padding:.15rem .45rem;
    border-radius:999px;
    letter-spacing:.02em;
}
.badge.free { background: rgba(60,60,60,.4); color:#ddd; }
.badge.cost { background: rgba(255,0,77,.15); color:#ff5a7a; border-color:rgba(255,0,77,.35); }
.badge.mod  { background: rgba(100,180,255,.12); color:#a7d2ff; border-color:rgba(120,180,255,.35); }

/* Tokens */
.kbd{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size:.9rem;
    padding:.12rem .35rem;
    border:1px solid #333;
    background:#0d0d0d;
    color:#ffccda;
    border-radius:4px;
    box-shadow: inset 0 0 6px rgba(255,0,77,.15);
}
.arg{ color:#f08ea5; }

/* Current page underline */
nav a[aria-current="page"]::after { width: 100%; }

/* Controls bar */
.cmd-controls{
    display:flex;
    gap:1rem;
    align-items:center;
    justify-content:space-between;
    margin:.5rem 0 1rem;
    flex-wrap:wrap;
}

/* Pills row */
.filter-pills{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Base pill */
.pill{
    appearance:none; cursor:pointer;
    padding:.38rem .8rem; border-radius:999px; font-weight:800; letter-spacing:.02em;
    border:1px solid #2f2f2f; background:#0f0f0f; color:#9a9a9a;
    box-shadow: inset 0 0 8px rgba(255,0,77,.06);
    transition: transform .07s ease, box-shadow .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.pill:hover{ transform: translateY(-1px); }

/* ACTIVE states */
.pill.active[data-key="free"]{
    background:#131313; color:#e2e2e2; border-color:#3a3a3a;
    box-shadow: inset 0 0 10px rgba(255,255,255,.06);
}
.pill.active[data-key="cost"]{
    background:rgba(255,0,77,.12); color:#ff5a7a; border-color:rgba(255,0,77,.35);
    box-shadow: 0 0 10px rgba(255,0,77,.18), inset 0 0 10px rgba(255,0,77,.16);
}
.pill.active[data-key="mod"]{
    background:rgba(90,160,255,.12); color:#a7d2ff; border-color:rgba(90,160,255,.35);
    box-shadow: 0 0 10px rgba(120,180,255,.18), inset 0 0 10px rgba(120,180,255,.16);
}

/* Search */
.cmd-search{ flex:1; display:flex; justify-content:flex-end; min-width:260px; }
.cmd-search input[type="search"]{
    width: min(420px, 100%);
    background:#0e0e0e;
    color:#e9e9e9;
    border:1px solid #2f2f2f;
    border-radius:10px;
    padding:.55rem .8rem;
    outline:none;
    box-shadow: inset 0 0 8px rgba(255,0,77,.10);
}
.cmd-search input[type="search"]::placeholder{ color:#888; }
.cmd-search input[type="search"]:focus{
    border-color:#3a3a3a;
    box-shadow:
            0 0 12px rgba(255,0,77,.16),
            inset 0 0 10px rgba(255,0,77,.16);
}

/* Mobile */
@media (max-width: 860px){
    .promo-wrap{ grid-template-columns: 1fr; }
    .promo-right{ display:flex; }
    .btn-live{ width:100%; text-align:center; }
}

/* Remove old red bars if any legacy styles exist */
.promo-wrap::before,
.command-card::before { content: none !important; }

/* Hide any old legend block if present */
.legend{ display:none; }