/* Video presentation from template/comm/videos.html (used by EN), scoped to CN. */
.cn-video-hero h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      color: #111827;
      letter-spacing: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    @media (min-width: 768px) { .cn-video-hero h1 { font-size: 30px; } }
    .cn-video-hero .total {
      font-size: 13px;
      font-weight: 600;
      color: #b91c1c;
      background: #fef2f2;
      border: 1px solid #fecaca;
      padding: 3px 12px;
      border-radius: 999px;
    }
    .cn-video-hero .sub { display: none; }
    .cn-video-hero .rule {
      height: 4px;
      width: 58px;
      border-radius: 999px;
      background: linear-gradient(90deg, #d52b1e, #f59e0b);
      margin-top: 10px;
      margin-bottom: 10px;
    }

    /* ---- category bar ---- */
    .cn-video-cats {
     display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0px;
    margin-bottom: 10px;
    }
    .cn-video-cat {
      flex: none;
      white-space: nowrap;
      padding: 6px;
      border-radius: 999px;
      border: 1px solid #e5e7eb;
      background: #fff;
      color: #4b5563;
      font-size: 10px;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition: all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .cn-video-cat:hover { border-color: #fca5a5; color: #b91c1c; transform: translateY(-1px); }
    .cn-video-cat[aria-pressed="true"] {
      background: linear-gradient(135deg, #d52b1e, #b91c1c);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.55);
    }
    .cn-video-cat .n { opacity: 0.6; margin-left: 6px; font-size: 0px; }
    .cn-video-cat[aria-pressed="true"] .n { opacity: 0.85; }
    @media (min-width: 1440px) {
      .cn-video-cats {
      gap: 8px;
      padding:8px;
      margin-bottom: 10px;
    }
    .cn-video-cat {
      padding: 10px ;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
    }
    .cn-video-cat .n { opacity: 0.6; margin-left: 6px; font-size: 12px; }
    .cn-video-hero .sub { margin: 8px 0 0; color: #6b7280; font-size: 14px; }
     }
    /* ---- player ---- */
    .cn-video-player-wrap {
      display: none;
      max-width: 960px;
      margin: 0 auto 44px;
    }
    .cn-video-player-wrap:not([hidden]) { display: block; }
    .cn-video-player-box {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 28px 64px -24px rgba(0, 0, 0, 0.5);
    }
    .cn-video-player-box iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .cn-video-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.2s;
    }
    .cn-video-close:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.05); }
    .cn-video-player-title {
      margin: 14px 0 0;
      text-align: center;
      color: #374151;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.5;
    }

    /* ---- playlist groups ---- */
    .cn-video-group { margin-bottom: 42px; }
    .cn-video-group-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }
    .cn-video-group-head .bar {
      width: 5px;
      height: 22px;
      border-radius: 999px;
      background: linear-gradient(180deg, #d52b1e, #f59e0b);
      flex: none;
    }
    .cn-video-group-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: #111827; }
    @media (min-width: 768px) { .cn-video-group-head h2 { font-size: 19px; } }
    .cn-video-group-head .count {
      font-size: 12px;
      font-weight: 600;
      color: #9ca3af;
      background: #f3f4f6;
      padding: 2px 10px;
      border-radius: 999px;
    }

    /* ---- card wall (responsive) ---- */
    .cn-video-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      grid-template-columns: repeat(2, 1fr);
    }
    @media (min-width: 640px) { .cn-video-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } }
    @media (min-width: 1024px) { .cn-video-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1440px) { .cn-video-grid { grid-template-columns: repeat(4, 1fr);gap: 16px; } }

    .cn-video-card {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      cursor: pointer;
      text-align: left;
      box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .cn-video-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 44px -18px rgba(17, 24, 39, 0.28);
    }

    .cn-video-thumb { position: relative; aspect-ratio: 16 / 9; background: #0a0a0a; overflow: hidden; }
    .cn-video-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .cn-video-card:hover .cn-video-thumb img { transform: scale(1.08); }
    .cn-video-thumb .shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.42), transparent 48%);
      pointer-events: none;
    }
    .cn-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
    .cn-video-play .dot {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      background: linear-gradient(135deg, #ef4444, #b91c1c);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0 8px 20px rgba(220, 38, 38, 0.45);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .cn-video-play .dot svg { width: 20px; height: 20px; margin-left: 2px; }
    .cn-video-card:hover .cn-video-play .dot {
      transform: scale(1.12);
      box-shadow: 0 12px 30px rgba(220, 38, 38, 0.6);
    }

    .cn-video-meta { padding: 13px 15px 16px; }
    .cn-video-meta h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #1f2937;
      line-height: 1.42;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: 2.84em;
      word-break: break-word;
    }
    .cn-video-meta .pl {
      margin-top: 9px;
      font-size: 12px;
      color: #9ca3af;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cn-video-empty { text-align: center; color: #9ca3af; padding: 70px 0; font-size: 15px; }


/* CN-only notice and bounded-loading feedback; list styles above match EN. */
.cn-videos [hidden], .cn-video-player-wrap[hidden], .cn-video-player-wrap [hidden] { display: none !important; }
.cn-video-notice { margin: 6px 0; color: #92400e; font-size: 12px; line-height: 1.6; }
.cn-video-thumb-label { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #9ca3af; font-size: 11px; }
.cn-video-thumb[data-state="ready"] .cn-video-thumb-label { display: none; }
.cn-video-card { min-width: 0; }
.cn-video-player-wrap { scroll-margin-top: 90px; }
.cn-video-player-box { min-height: 200px; }
.cn-video-frame { position: absolute; inset: 0; }
.cn-video-close { z-index: 2; }
.cn-video-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 16px; text-align: center; background: #111827; color: #e5e7eb; }
.cn-video-status-icon { color: #9ca3af; font-size: 24px; }
.cn-video-status p { max-width: 560px; margin: 0; font-size: 13px; line-height: 1.7; }
.cn-video-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cn-video-actions button, .cn-video-actions a { display: inline-block; padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; text-decoration: none; cursor: pointer; }
.cn-video-actions button { background: #dc2626; border: 1px solid #dc2626; color: #fff; }
.cn-video-actions a { color: #e5e7eb; background: #263244; border: 1px solid #475569; }
.cn-videos button:focus-visible, .cn-video-player-wrap button:focus-visible, .cn-video-player-wrap a:focus-visible { outline: 3px solid #e85043; outline-offset: 3px; }