.clip-list { padding: 20px; }
  .clip-item {
      border: 1px solid #ddd;
      padding: 15px;
      margin: 10px 0;
      cursor: pointer;
      border-radius: 4px;
  }
  .clip-item:hover { background: #f5f5f5; }
  .clip-title { font-weight: bold; font-size: 1.1em; margin-bottom: 5px; }
  .clip-meta { color: #666; font-size: 0.9em; margin-bottom: 5px; }
  .clip-link { font-size: 0.85em; }
  .clip-link a { color: #007cba; }

  .clip-detail { padding: 20px; max-width: 800px; margin: auto; }
  .clip-video { margin: 20px 0; text-align: center; }
  .clip-analysis { margin: 20px 0; }

  .clip-grid             { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 20px 0; }
  .clip-card             { background: #fff; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;
                           cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
  .clip-card:hover       { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  .clip-thumb            { width: 100%; height: 160px; object-fit: cover; display: block; }
  .clip-card-body        { padding: 12px; }
  .clip-card .clip-title { font-weight: bold; font-size: 14px; margin-bottom: 8px;
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clip-card .clip-meta  { font-size: 11px; color: #666; line-height: 1.4; }
  
  .analysis-row {
      padding: 10px;
      border-bottom: 1px solid #eee;
      line-height: 1.6;
  }
  .analysis-row strong { display: inline-block; min-width: 150px; color: #333; }

  #comments-section {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 2px solid #ddd;
  }
  #comments-thread { margin: 15px 0; }
  .comment {
      background: #f9f9f9;
      padding: 10px;
      margin: 10px 0;
      border-left: 3px solid #007cba;
      border-radius: 4px;
  }
  .comment-meta { font-size: 0.85em; color: #666; margin-bottom: 5px; }
  .comment-text { line-height: 1.5; }