/* =========================
   PAGE CODES VERSE
   ========================= */

.codes-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.code-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}

/* Header */
.code-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.code-title{
  font-weight:800;
  font-size:16px;
}

.code-desc{
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin-top:4px;
}

/* Actions */
.code-actions{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.code-actions button,
.code-actions a{
  font-size:13px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}

.code-actions button:hover,
.code-actions a:hover{
  background:rgba(255,255,255,.10);
  text-decoration:none;
}

.code-actions button:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Code boxes */
pre.codebox{
  margin:0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  overflow:auto;
}

pre.codebox code{
  display:block;
  padding:14px;
  font-size:13px;
  line-height:1.5;
}

/* Preview / Full */
.code-preview{ margin-top:10px; }

.code-full{
  margin-top:10px;
}

pre.codebox.full code{
  font-size:14px;
  line-height:1.6;
}

/* Utils */
.hidden{
  display:none;
}