.skills-page {
 display: flex;
 flex-direction: column;
 gap: 16px;
 min-height: 100%;
 padding: 32px;
}

.skills-heading {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
}

.skills-heading h1 {
 margin: 0 0 4px;
}

.skills-heading p {
 margin: 0;
 max-width: 40rem;
}

.skills-actions {
 display: flex;
 gap: 8px;
 flex-shrink: 0;
}

.skills-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.skills-row {
 display: grid;
 grid-template-columns:
  minmax(0, 1.4fr)
  auto;
 gap: 2px 16px;
 width: 100%;
 padding: 12px 14px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--card);
 color: inherit;
 font: inherit;
 text-align: left;
 text-decoration: none;
 cursor: pointer;
}

.skills-row:hover {
 background: var(--accent);
}

.skills-row-title {
 font-weight: 600;
}

.skills-row-slug {
 justify-self: end;
 color: var(--muted-foreground);
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  monospace;
 font-size: 13px;
}

.skills-row-desc,
.skills-row-kind {
 grid-column: 1 / -1;
 font-size: 13px;
}

.skill-hint {
 margin: 0;
 font-size: 12px;
}

.skill-md-editor {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.skill-md-toolbar {
 display: flex;
 gap: 8px;
}

.skill-md-write {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.skill-md-input {
 min-height: 16rem;
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  monospace;
 font-size: 13px;
}

.skill-md-preview {
 min-height: 16rem;
 padding: 12px;
 overflow: auto;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--background);
}

.skill-client-section {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 8px;
 padding-top: 16px;
 border-top: 1px solid var(--border);
}

.skill-client-for {
 margin: 0;
 font-weight: 600;
}

.skill-client-editor {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.skill-client-actions {
 display: flex;
 gap: 8px;
 justify-content: flex-end;
}

.skill-client-actions .btn-destructive {
 margin-right: auto;
}

.skills-detail {
 display: flex;
 flex-direction: column;
 gap: 16px;
 max-width: 52rem;
}

.skills-back {
 width: fit-content;
 color: var(--muted-foreground);
 font-size: 13px;
 text-decoration: none;
}

.skills-back:hover {
 color: var(--foreground);
}

.skills-detail h1,
.skills-detail > .muted {
 margin: 0;
}

.skills-detail-actions {
 display: flex;
 gap: 8px;
 width: 100%;
 justify-content: flex-end;
}

.skills-detail-actions
 .btn-destructive {
 margin-right: auto;
}

.skill-automation-section h2 {
 margin: 8px 0;
}

.skill-automation-folders {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
}

.skill-automation-folder {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--foreground);
 font-size: var(--text-sm);
 text-decoration: none;
}

.skill-automation-folder:hover {
 text-decoration: underline;
}

@media (max-width: 720px) {
 .skills-heading {
  flex-direction: column;
 }
}