/* Styles (same as v6) */
.ccd-wrap { max-width: 1180px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }
.ccd-title { font-size: 28px; font-weight: 600; margin: 10px 0 20px; }

.ccd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; }
.ccd-cards.ccd-cards-4 { grid-template-columns: repeat(4, 1fr); }
.ccd-card { background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.06); padding: 22px; position: relative; overflow: hidden; }
.ccd-card-num { font-size: 42px; font-weight: 700; line-height: 1; margin-bottom: 8px; }
.ccd-card-label { color: #6b7280; margin-bottom: 14px; }
.ccd-card-btn { display: inline-block; padding: 10px 14px; border-radius: 8px; background: #f59e0b22; text-decoration: none; font-weight: 600; }
.ccd-card-green .ccd-card-btn { background: #10b981; color: #fff; }
.ccd-card-blue .ccd-card-btn { background: #6366f1; color: #fff; }
.ccd-card-purple .ccd-card-btn { background: #8b5cf6; color: #fff; }
.ccd-card-orange .ccd-card-btn { background: #f59e0b; color: #fff; }

.ccd-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.ccd-panel { background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.06); padding: 22px; }
.ccd-panel h3 { margin: 0 0 12px; }
.ccd-muted { color: #9ca3af; }

.ccd-filters { display: flex; gap: 10px; margin: 12px 0 16px; align-items: center; }
.ccd-filters input[type="text"], .ccd-filters select { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
.ccd-filters button { padding: 10px 14px; border-radius: 8px; border: 0; background: #111827; color: #fff; font-weight: 600; }
.ccd-filters .ccd-export { padding: 10px 14px; border-radius: 8px; border: 1px solid #e5e7eb; text-decoration: none; }

.ccd-table { background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.06); overflow: hidden; }
.ccd-table-head { display: grid; grid-template-columns: 2fr 1.2fr 2fr 1fr .8fr; gap: 16px; padding: 14px 16px; background: #f3f4f6; font-weight: 600; }
.ccd-table-head a.ccd-sort { text-decoration: none; color: inherit; }
.ccd-table-head a.ccd-sort .dir { font-size: 12px; opacity: .6; }
.ccd-row { display: grid; grid-template-columns: 2fr 1.2fr 2fr 1fr .8fr; gap: 16px; padding: 16px; border-top: 1px solid #f3f4f6; text-decoration: none; color: inherit; }
.ccd-row:hover { background: #fafafa; }
.ccd-empty { padding: 18px; text-align: center; color: #9ca3af; }

.ccd-status { font-weight: 700; }
.ccd-status.ok { color: #059669; }
.ccd-status.dnc { color: #dc2626; }

.ccd-list { list-style: none; margin: 0; padding: 0; }
.ccd-list li { padding: 6px 0; border-bottom: 1px dotted #eee; }
.ccd-list li:last-child { border-bottom: 0; }

.ccd-pagination { display: flex; gap: 8px; justify-content: flex-end; padding: 12px; }
.ccd-pagination a { padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: inherit; }
.ccd-pagination a.current { background: #111827; border-color: #111827; color: #fff; }

@media (max-width: 1200px) {
  .ccd-cards.ccd-cards-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ccd-cards { grid-template-columns: 1fr; }
  .ccd-panels { grid-template-columns: 1fr; }
  .ccd-table-head, .ccd-row { grid-template-columns: 1fr; }
  .ccd-table-head { display: none; }
  .ccd-row > div { padding: 4px 0; }
}