/* commands.css - commands page, badges, command cards - split from index.html */

        /* ── COMMANDS PAGE ── */
        .commands-wrap {
            max-width: 860px; margin: 0 auto; padding-bottom: 80px;
        }
        .commands-block {
            background: var(--bg2); border: 1px solid var(--card-border);
            border-radius: 14px; padding: 36px; margin-top: 0;
        }
        .commands-block p { color: var(--muted); line-height: 1.8; margin-bottom: 24px; }
        .badge-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
        .badge {
            background: var(--bg3); border: 1px solid var(--card-border);
            border-radius: 8px; padding: 6px 14px;
            font-size: 13px; color: #ccc;
            font-family: 'JetBrains Mono', monospace;
            transition: all var(--transition);
        }
        .badge:hover { border-color: var(--red-border); color: white; background: var(--red-dim); }
        .cmd-note {
            background: var(--bg3); border-left: 3px solid var(--red);
            border-radius: 0 10px 10px 0; padding: 16px 20px;
            font-size: 14px; color: var(--muted); line-height: 1.7;
        }
        code {
            font-family: 'JetBrains Mono', monospace;
            background: rgba(122,0,0,0.1); color: var(--red);
            padding: 2px 8px; border-radius: 5px; font-size: 13px;
        }
        /* Commands Tab - info block */
        .info-block {
            background: var(--bg2); border: 1px solid var(--card-border);
            border-radius: 16px; padding: 40px;
            transition: all var(--transition);
        }
        .info-block:hover { border-color: var(--red-border); }
        .info-block p { color: #bbb; line-height: 1.9; margin-bottom: 12px; font-size: 16px; }
        .badge-list { display:flex; flex-wrap:wrap; gap:10px; margin: 24px 0; }
        .badge {
            background: var(--bg3); border: 1px solid var(--card-border);
            padding: 7px 14px; border-radius: 6px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px; color: #bbb;
            transition: all var(--transition); cursor:default;
        }
        .badge:hover {
            background: var(--red-dim); border-color: var(--red-border);
            color: white; transform: translateY(-2px);
        }
        .cmd-card {
            background: var(--bg3);
            border: 1px solid var(--card-border);
            border-radius: 12px;
            padding: 16px 18px;
            transition: border-color var(--transition), transform var(--transition);
            cursor: default;
        }
        .cmd-card:hover { border-color: var(--red-border); transform: translateY(-2px); }
        .cmd-card-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
        .cmd-name { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:600; color:var(--red); }
        .cmd-cat-tag { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; margin-left:auto; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
        .cmd-desc { font-size:13px; color:#aaa; line-height:1.6; }
        .cat-btn {
            padding:6px 14px; border-radius:999px; font-size:11px; font-weight:700;
            border:1px solid var(--card-border); background:var(--bg3); color:var(--muted);
            cursor:pointer; transition:all var(--transition); font-family:var(--font-mono);
            text-transform:uppercase; letter-spacing:0.6px;
        }
        .cat-btn.active, .cat-btn:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }