.doc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  padding:20px;
}

.doc-card {
  background:#11131a;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
    cursor:pointer;
}
.doc-card:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.doc-card h2 {
  font-size:18px; margin:0 0 8px;
}
.doc-card p {
  font-size:14px; color:var(--muted); flex:1;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  line-clamp: 3; /* number of lines to show */
  -webkit-line-clamp:3; -webkit-box-orient:vertical;
}
.doc-meta {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; font-size:12px; color:var(--muted);
}

/* === INDEX PAGE === */
.index-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px;
  background:linear-gradient(180deg,#0f1320,#0e121c);
  border-bottom:1px solid var(--border);
}
.index-header h1 {
  font-size:20px; margin:0;
}
.index-header button {
  background:var(--brand); color:#fff; font-weight:600;
  border:none; border-radius:8px; padding:8px 14px;
  cursor:pointer;
}
.index-header button {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
}

 h1 {
  display: inline-flex;         /* use flex layout */
  align-items: center;          /* vertical align */
  gap: 6px;                     /* spacing between icon and text */
  padding: 8px 12px;            /* adjust as needed */
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
}
h1 i {
  display: inline-block;        /* ensures the icon behaves as a box */
  font-size: 1em;               /* keep consistent with text */
  line-height: 1;               /* no extra vertical space */
}