/* Trang /commands — đồng bộ màu/nền với shell (accent xanh, panel 80%). */

body.cmds{
  font-family:Outfit,gg sans,system-ui,-apple-system,sans-serif;
  margin:0;
  padding-bottom:64px;
  background:var(--um-bg);
  color:var(--um-text);
}
body.cmds.has-scene,
body.cmds:not(.has-scene){
  background:
    radial-gradient(1000px 520px at var(--scene-glow-x, 12%) var(--scene-glow-y, -8%), rgba(58,160,239,.16), transparent 55%),
    radial-gradient(800px 420px at var(--scene-glow2-x, 88%) var(--scene-glow2-y, 0%), rgba(110,190,255,.1), transparent 50%),
    var(--um-bg);
}

.cmd-hero{
  max-width:1120px;
  margin:0 auto;
  padding:36px 24px 24px;
}
.cmd-hero h1{
  font-size:1.9rem;margin:0 0 10px;color:#eaf6ff;
  font-weight:700;
}
.cmd-hero p{margin:0 0 8px;color:var(--um-muted);font-size:.95rem;line-height:1.6}
.cmd-hero .hero-note{font-size:.88rem}
.cmd-hero code{
  background:var(--um-panel);border:1px solid var(--um-line);
  border-radius:5px;padding:1px 6px;font-size:.86em;color:var(--um-text);
}
.cmd-hero a{color:var(--um-link)}

.cmd-layout{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:232px 1fr;
  gap:28px;
  align-items:start;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.cmd-side{
  position:sticky;top:76px;display:flex;flex-direction:column;gap:14px;
  background:var(--um-panel);border:1px solid var(--um-line);
  border-radius:14px;padding:14px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

.cmd-search input{
  width:100%;box-sizing:border-box;
  background:rgba(30,31,34,.55);border:1px solid var(--um-line);
  border-radius:9px;padding:10px 12px;color:var(--um-text);font-size:.92rem;
}
.cmd-search input:focus{outline:none;border-color:var(--um-accent)}

.cmd-cats{display:flex;flex-direction:column;gap:2px}
.cmd-cats a{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:8px;
  color:var(--um-muted);text-decoration:none;font-size:.92rem;
}
.cmd-cats a:hover{background:rgba(255,255,255,.05);color:var(--um-text)}
.cmd-cats a.on{
  background:rgba(58,160,239,.28);color:#eaf6ff;
  border:1px solid rgba(58,160,239,.35);
}
.cmd-cats a .e{font-size:1rem;line-height:1}
.cmd-cats a .n{margin-left:auto;font-size:.78rem;opacity:.7;font-variant-numeric:tabular-nums}

.cmd-filter{
  display:flex;align-items:center;gap:8px;
  color:var(--um-muted);font-size:.86rem;cursor:pointer;
  padding:0 10px;
}
.cmd-filter input{accent-color:var(--um-accent)}

/* ── Danh sách lệnh ──────────────────────────────────────────────────────── */

.cmd-group{margin-bottom:34px;scroll-margin-top:88px}
.cmd-group h2{
  display:flex;align-items:center;gap:9px;
  font-size:1.12rem;margin:0 0 12px;color:#c8e7ff;
}
.cmd-group h2 .e{font-size:1.15rem}

.cmd-list{display:flex;flex-direction:column;gap:10px}

.cmd-item{
  background:var(--um-card);border:1px solid var(--um-line);
  border-radius:11px;padding:14px 16px;
  scroll-margin-top:88px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.cmd-item:target{border-color:var(--um-accent)}

.cmd-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmd-name{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.94rem;color:#eaf6ff;
}
.cmd-anchor{
  margin-left:auto;color:var(--um-muted);text-decoration:none;
  opacity:0;font-size:.9rem;
}
.cmd-item:hover .cmd-anchor{opacity:1}
.cmd-anchor:hover{color:var(--um-link)}

.badge{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 7px;border-radius:999px;
  background:var(--um-ghost);color:#fff;
}
.badge.admin{
  background:rgba(58,160,239,.22);
  color:#8ec8f7;
  border:1px solid rgba(58,160,239,.4);
}
.badge.custom{
  background:rgba(87,201,168,.18);
  color:#7fd9bc;
  border:1px solid rgba(87,201,168,.4);
}

.cmd-desc{margin:7px 0 0;font-size:.9rem;color:var(--um-text);line-height:1.55}

.cmd-params{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.cmd-params li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:.83rem}
.cmd-params code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(30,31,34,.55);border:1px solid var(--um-line);
  border-radius:4px;padding:1px 6px;color:#eaf6ff;
}
.cmd-params .ptype{color:var(--um-muted)}
.cmd-params .preq{color:#f0b232}
.cmd-params .pdesc{color:var(--um-muted);flex:1;min-width:160px}

.cmd-alias{margin:10px 0 0;font-size:.82rem;color:var(--um-muted)}
.cmd-alias code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(30,31,34,.55);border:1px solid var(--um-line);
  border-radius:4px;padding:1px 6px;margin-right:5px;
}

.cmd-empty,.cmd-noresult{
  background:var(--um-panel);border:1px solid var(--um-line);
  border-radius:11px;padding:18px;color:var(--um-muted);font-size:.9rem;
}

@media (max-width:860px){
  .cmd-layout{grid-template-columns:1fr;gap:18px}
  .cmd-side{position:static}
  .cmd-cats{flex-direction:row;flex-wrap:wrap}
  .cmd-cats a{font-size:.86rem}
  .cmd-cats a .n{margin-left:4px}
}

/* Lệnh xoá dữ liệu (/xoadata): chữ đỏ + ghi chú «không hoàn tác được» */
.cmd-item.is-danger{border-color:rgba(242,63,67,.45)}
.cmd-item.is-danger .cmd-name,.cmd-item.is-danger .cmd-desc{color:#ff7b7e}
.badge.danger{background:rgba(242,63,67,.14);border:1px solid rgba(242,63,67,.45);color:#ff9a9c}