/* ─── Hermes Markdown & Rich Blocks Styles ─── */

/* Markdown text */
.hp-md strong { font-weight: 600; color: #111; }
.hp-md em { font-style: italic; }
.hp-md code { background: #f0f0f0; padding: 1px 5px; border-radius: 3px; font-size: 10px; color: #c0392b; font-family: 'SF Mono', 'Menlo', 'Monaco', monospace; }
.hp-md a { color: #8B7355; text-decoration: underline; }
.hp-md a:hover { opacity: 0.8; }
.hp-md h3 { font-size: 12px; font-weight: 600; margin: 8px 0 4px; color: #111; }
.hp-md h4 { font-size: 11px; font-weight: 600; margin: 6px 0 3px; color: #111; }
.hp-md ul { padding-left: 16px; margin: 4px 0; }
.hp-md ol { padding-left: 16px; margin: 4px 0; }
.hp-md li { font-size: 11px; color: #444; margin-bottom: 2px; }
.hp-md blockquote { border-left: 2px solid #8B7355; padding-left: 10px; color: #888; font-size: 11px; margin: 4px 0; }
.hp-md hr { border: none; border-top: 1px solid #eaeaea; margin: 8px 0; }
.hp-md p { margin: 4px 0; min-height: 1em; }

/* Code block */
.hc-block { background: #1a1a2e; border-radius: 8px; overflow: hidden; margin: 6px 0; font-size: 10px; line-height: 1.6; }
.hc-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 10px; background: #16163a; font-size: 9px; color: #888; }
.hc-lang { text-transform: uppercase; letter-spacing: 0.05em; font-size: 8px; }
.hc-copy { cursor: pointer; background: none; border: none; color: #888; font-size: 10px; padding: 2px 6px; border-radius: 3px; transition: all 0.15s; font-family: inherit; }
.hc-copy:hover { background: rgba(139,115,85,0.2); color: #8B7355; }
.hc-block pre { margin: 0; padding: 10px; overflow-x: auto; }
.hc-block code { color: #e0e0e0; font-family: 'SF Mono', 'Menlo', 'Monaco', monospace; font-size: 10px; white-space: pre; }
/* Syntax highlighting */
.hc-kw { color: #c792ea; font-weight: 500; }
.hc-str { color: #c3e88d; }
.hc-num { color: #f78c6c; }
.hc-cm { color: #546e7a; font-style: italic; }

/* Alert */
.hp-alert { display: flex; align-items: flex-start; gap: 6px; padding: 6px 10px; border-radius: 6px; font-size: 10px; margin: 4px 0; line-height: 1.5; }
.hp-alert-info { background: rgba(52,152,219,0.08); color: #2980b9; }
.hp-alert-success { background: rgba(46,204,113,0.08); color: #27ae60; }
.hp-alert-warning { background: rgba(241,196,15,0.08); color: #c0940e; }
.hp-alert-error { background: rgba(231,76,60,0.08); color: #c0392b; }
.hp-alert-icon { font-size: 12px; flex-shrink: 0; line-height: 1.4; }

/* Resource Card */
.hp-card { border: 1px solid #eaeaea; border-radius: 8px; padding: 10px; margin: 6px 0; background: #fafafa; }
.hp-card-title { font-size: 11px; font-weight: 600; margin-bottom: 8px; color: #111; }
.hp-card-row { display: flex; gap: 6px; font-size: 10px; margin-bottom: 5px; align-items: center; }
.hp-card-row:last-child { margin-bottom: 0; }
.hp-card-label { flex: 1; color: #666; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-card-value { color: #444; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.hp-bar { flex: 1; height: 4px; background: #eaeaea; border-radius: 999px; overflow: hidden; max-width: 80px; }
.hp-bar div { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.hp-card-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eaeaea; flex-wrap: wrap; }

/* Button Group */
.hp-btn-group { display: flex; gap: 6px; margin: 4px 0; flex-wrap: wrap; }

/* Progress Bar */
.hp-progress { display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 6px 10px; background: #fafafa; border-radius: 6px; }
.hp-progress-label { font-size: 10px; color: #666; flex-shrink: 0; }
.hp-progress-track { flex: 1; height: 6px; background: #eaeaea; border-radius: 999px; overflow: hidden; }
.hp-progress-fill { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.hp-progress-pct { font-size: 9px; color: #888; flex-shrink: 0; min-width: 30px; text-align: right; }

/* Site Preview Card */
.hp-site-card { display: flex; gap: 8px; border: 1px solid #eaeaea; border-radius: 8px; padding: 8px; margin: 6px 0; background: #fafafa; transition: border-color 0.15s; cursor: pointer; }
.hp-site-card:hover { border-color: #8B7355; }
.hp-site-thumb { width: 60px; height: 40px; border-radius: 4px; overflow: hidden; background: #f0f0f0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.hp-site-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-site-info { flex: 1; min-width: 0; }
.hp-site-name { font-size: 11px; font-weight: 500; color: #111; }
.hp-site-domain { font-size: 9px; color: #999; margin-top: 1px; }
.hp-site-status { display: inline-block; font-size: 9px; padding: 1px 6px; border-radius: 999px; margin-top: 3px; }

/* Table */
.hp-table-wrap { overflow-x: auto; margin: 6px 0; }
.hp-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.hp-table th { background: #f5f5f5; padding: 5px 8px; text-align: left; font-weight: 600; color: #111; border-bottom: 1px solid #eaeaea; }
.hp-table td { padding: 4px 8px; border-bottom: 1px solid #f0f0f0; color: #444; }

/* Image */
.hp-image-wrap { margin: 6px 0; }
.hp-image { max-width: 100%; border-radius: 6px; border: 1px solid #eaeaea; }

/* Spacer */
.hc-spacer { height: 8px; }

/* Mobile */
@media (max-width: 480px) {
  .hc-block { font-size: 9px; }
  .hc-block pre { padding: 8px; }
  .hp-card-row { flex-wrap: wrap; }
  .hp-bar { max-width: 60px; }
  .hp-site-thumb { width: 48px; height: 32px; }
}