/* putao_new v2 - full visual rewrite (light card theme) */

:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-soft: #f9fbff;
  --text: #23314f;
  --text-soft: #64739a;
  --line: #dde5f2;
  --primary: #1266f1;
  --primary-strong: #0f55c9;
  --accent: #ff8a00;
  --danger: #e65757;
  --shadow: 0 10px 24px rgba(29, 55, 104, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(1200px 480px at 12% -6%, #e7f0ff 0, rgba(231, 240, 255, 0) 60%),
    radial-gradient(900px 360px at 90% 0, #ffeeda 0, rgba(255, 238, 218, 0) 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 14px;
}

a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-strong);
}

.width1200,
.head_box,
.stui-pannel,
.addition-content,
.list-nav,
.white {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.head_box,
.stui-pannel,
.list-nav,
.white {
  background: var(--panel);
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
}

/* header */
.head_box {
  margin-top: 14px;
}

.header {
  margin: 0;
  min-height: 106px;
  height: auto !important;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.header_left,
.header_right,
.header_submit,
.header_submit_b {
  float: none !important;
}

.header_left {
  margin: 0;
}

.header_left a,
.header_left img {
  width: 270px;
  height: 72px;
}

.header_right {
  flex: 1;
  width: 100%;
  margin: 0;
}

.header_submit {
  width: 100%;
  margin: 0;
  height: auto;
}

.header_submit_b {
  display: flex;
}

.header_submit_b form {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.header_submit_b input[type=text] {
  flex: 1 1 auto;
  width: auto;
  height: 44px;
  line-height: 44px;
  border: 1px solid #cfd9ea;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: var(--panel-soft);
  color: var(--text);
  text-indent: 14px;
  float: none !important;
  margin: 0 !important;
}

.header_submit_b input[type=text]::placeholder {
  color: #8a98b8;
}

.header_submit_b input[type=submit] {
  flex: 0 0 98px;
  width: 98px;
  height: 44px;
  border-radius: 0 10px 10px 0;
  border: 0;
  background: linear-gradient(135deg, var(--primary), #4094ff);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  float: none !important;
  margin: 0 !important;
}

.header_submit_b input[type=submit]:hover {
  background: linear-gradient(135deg, var(--primary-strong), #2f82f5);
}

.header_list {
  margin-top: 12px;
}

.header_list ul li {
  border-right: 1px solid #d7e0ef;
  color: var(--text-soft);
}

/* category area */
.nav {
  width: auto;
  margin: 10px;
  height: auto;
  overflow: hidden;
}

.nav .width1200 {
  width: 100% !important;
  margin: 0 !important;
}

.nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  width: 100%;
}

.nav ul li {
  float: none !important;
  width: auto;
  height: 44px;
  line-height: 44px;
  margin: 0;
  border: 1px solid #d8e1f0;
  border-radius: 10px;
  background: #fff;
}

.nav ul li a {
  display: block;
  color: #34466f !important;
  font-size: 16px;
}

.nav ul li:nth-child(1),
.nav ul li:hover,
.nav ul li.yes {
  border-color: #b7ceff;
  background: linear-gradient(135deg, #eff5ff, #dfeeff);
}

.nav ul li:nth-child(1) a,
.nav ul li:hover a,
.nav ul li.yes a {
  color: #1249ac !important;
  font-weight: 700;
}

/* notice */
.announce-panel {
  margin-top: 14px;
  background: #fff !important;
  border: 1px solid #ffd6a3 !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.notice-head {
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #ff9800, #ffb347) !important;
  border-bottom: 1px solid #ffb866 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notice-head .title {
  margin: 0;
  color: #fff !important;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.notice-meta {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 14px;
}

.notice-meta a {
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline;
}

.notice-body {
  padding: 14px 18px 18px !important;
  background: #fff !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.notice-body p {
  margin: 0 !important;
  color: #2f456f !important;
  word-break: break-all;
  background: #fffaf3;
  border: 1px solid #ffe3be;
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.8;
}

.notice-body .text-red {
  color: #e37900 !important;
  font-weight: 600;
}

.announce-panel,
.announce-panel * {
  text-shadow: none !important;
}

.announce-panel a:not(.text-red) {
  color: #1f4c99 !important;
}

.announce-panel .notice-meta {
  color: rgba(255, 255, 255, 0.92) !important;
}

.notice-body span[style*="E53333"] {
  display: inline-block;
  color: var(--danger) !important;
  border-left: 3px solid #ff8c8c;
  padding-left: 8px;
  background: #fff5f5;
}

/* list header + rows */
.addition-content {
  margin-top: 14px;
}

.videotitle {
  background: linear-gradient(135deg, #1a73ff, #4096ff);
  color: #fff;
  border-radius: 14px 14px 0 0 !important;
  border: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px 110px 130px;
  column-gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.videotitle .videoName,
.videotitle .category,
.videotitle .address,
.videotitle .time {
  color: #fff !important;
}

.videotitle .category,
.videotitle .address {
  text-align: center;
}

.videotitle .time {
  text-align: right;
}

.videoContent {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: var(--shadow) !important;
}

.videoContent li {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 130px 110px 130px;
  column-gap: 12px;
  align-items: center;
  padding: 10px 16px !important;
  border-bottom: 1px dashed #e1e8f3;
  float: none !important;
}

.videoContent li:last-child {
  border-bottom: 0;
}

.videoContent .videoName {
  display: block !important;
  width: auto !important;
  float: none !important;
  color: #1d2d4f !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoContent .category {
  text-align: center;
  color: #5d6f96;
}

.videoContent .address {
  display: inline-block !important;
  width: auto !important;
  float: none !important;
  text-align: center;
  border: 1px solid #ff9d2a;
  border-radius: 8px;
  color: #e88400;
  background: #fff7ec;
  padding: 3px 10px;
}

.videoContent .address:hover {
  color: #fff;
  background: #ff9d2a;
}

.videoContent .time {
  text-align: right;
  color: #7282a4;
}

/* paging */
.kscont {
  width: 980px;
  margin: 10px auto;
}

.pages {
  height: auto;
  line-height: 1.8;
  font-size: 14px;
  color: #5e6f94;
  text-align: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.pages a,
.pages span {
  border: 1px solid #d9e2f0;
  border-radius: 8px;
  background: #fff;
  color: #4a5f89;
}

.pages a:hover,
.pages span.active {
  background: #eaf2ff;
  border-color: #c6d8ff;
  color: #1349ac;
}

/* detail + play */
.list-nav.detail-breadcrumb,
.detail-card,
.player-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
}

.list-nav.detail-breadcrumb span,
.list-nav.detail-breadcrumb .limit {
  color: #54688f !important;
  background: transparent !important;
}

.list-nav.detail-breadcrumb a {
  color: var(--primary) !important;
}

.section-title {
  background: linear-gradient(90deg, #f4f8ff 0, #fff8ed 100%) !important;
  color: #1c4d9f !important;
  font-size: 18px !important;
}

.detail-info-card .right p {
  color: #233a64 !important;
  font-weight: 600;
}

.bugs {
  border: 1px solid #7ea8ff;
  border-radius: 8px;
  background: #edf3ff;
  color: #295fce;
}

.bugs:hover {
  background: #2c66db;
  border-color: #2c66db;
  color: #fff;
}

.copy-all-btn {
  border: 1px solid #f0a2a2;
  border-radius: 8px;
  color: #d15b5b;
  background: #fff4f4;
}

.copy-all-btn:hover {
  background: #eb6a6a;
  border-color: #eb6a6a;
  color: #fff;
}

.copy-tip {
  color: #4f648f !important;
}

.detail-card,
.detail-card p,
.detail-card a,
.detail-card span {
  text-shadow: none !important;
  opacity: 1 !important;
}

.detail-play-card .player-title {
  color: #1f3f77 !important;
  font-weight: 700;
  background: #f1f6ff;
  border-radius: 8px;
  padding-left: 12px;
  border: 1px solid #d8e5ff;
}

.detail-play-card .play-group {
  margin: 12px 14px 16px;
}

.detail-play-card .play-group h4 {
  margin: 0 0 8px;
}

.detail-play-card .playlist {
  border: 1px solid #dbe4f5;
  border-radius: 10px;
  background: #fbfdff;
  padding: 10px 12px;
}

.detail-play-card .play-url-list {
  margin: 0;
  padding: 0;
}

.detail-play-card .text-style {
  display: flex !important;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  border-bottom: 1px dashed #d8e2f2;
  padding: 10px 0 !important;
  margin: 0;
}

.detail-play-card .text-style:last-child {
  border-bottom: 0;
}

.detail-play-card .copy_text {
  flex: 1 1 auto;
  min-width: 0;
  color: #cc1f1f !important;
  overflow-wrap: anywhere;
}

.detail-play-card .copy_text font {
  color: #e42b2b !important;
}

.detail-play-card .bugs {
  flex: 0 0 auto;
  display: inline-block;
  padding: 4px 14px;
  line-height: 1.4;
  text-align: center;
}

.detail-play-card .copy-all-btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 4px 12px;
  line-height: 1.4;
}

.detail-play-card .copy-tip {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.player-card {
  min-height: 620px !important;
  padding: 14px !important;
}

.player-card iframe,
.player-card video,
.player-card object,
.player-card embed,
.player-card #player,
.player-card .MacPlayer,
.player-card .MacPlayerBox,
.player-card .dplayer {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 540px !important;
}

/* footer */
.footer {
  margin-top: 20px;
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.footer_right p {
  color: #6d7fa6;
}

/* responsive: tablet */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .width1200,
  .head_box,
  .stui-pannel,
  .addition-content,
  .list-nav,
  .white,
  .kscont,
  .footer .width1200 {
    width: calc(100% - 12px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .nav {
    margin: 8px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .nav ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    white-space: normal !important;
  }

  .nav ul li {
    float: none !important;
    display: block !important;
    width: auto !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
  }

  .nav ul li a {
    font-size: 13px !important;
    padding: 0 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header_left a,
  .header_left img {
    width: auto !important;
    max-width: 220px !important;
    height: 48px !important;
  }

  .header_right,
  .header_submit,
  .header_submit_b,
  .header_submit_b form {
    width: 100% !important;
    float: none !important;
  }

  .header_submit_b input[type=text] {
    min-width: 0;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }

  .header_submit_b input[type=submit] {
    flex: 0 0 86px;
    width: 86px;
    height: 40px;
    font-size: 14px;
  }

  .header_list {
    margin-top: 8px;
    width: 100%;
  }

  .header_list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .header_list ul li {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
    height: auto;
    line-height: 1.4;
  }

  .notice-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .notice-head .title {
    font-size: 18px;
    line-height: 1.35;
  }

  .notice-meta {
    font-size: 13px;
  }

  /* 覆盖 plugin.css 固定 920px 列表宽度 */
  .addition-content .videoContent li,
  .videoContent li {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    line-height: 1.45 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px 90px 96px !important;
    column-gap: 8px !important;
    box-sizing: border-box !important;
  }

  .videotitle {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 90px 90px 96px !important;
    column-gap: 8px !important;
  }

  .addition-content .videoContent .videoName,
  .videoContent .videoName,
  .videotitle .videoName {
    width: auto !important;
    max-width: 100% !important;
  }

  .addition-content .videoContent .category,
  .addition-content .videoContent .address,
  .addition-content .videoContent .time,
  .videoContent .category,
  .videoContent .address,
  .videoContent .time,
  .videotitle .category,
  .videotitle .address,
  .videotitle .time {
    width: auto !important;
  }

  .player-card {
    min-height: 360px !important;
    padding: 10px !important;
  }

  .player-card iframe,
  .player-card video,
  .player-card object,
  .player-card embed,
  .player-card #player,
  .player-card .MacPlayer,
  .player-card .MacPlayerBox,
  .player-card .dplayer {
    min-height: 260px !important;
  }

  .detail-play-card .text-style {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .detail-play-card .copy-tip {
    margin-left: 0;
    white-space: normal;
  }

  .people,
  .detail-info-card .people {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .people .left,
  .people .right,
  .detail-info-card .people .left,
  .detail-info-card .people .right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    height: auto !important;
  }

  .people .left img,
  .detail-info-card .people .left img {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
  }

  .right p,
  .people .right p {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* responsive: phone */
@media (max-width: 768px) {
  body {
    font-size: 13px;
  }

  .width1200,
  .head_box,
  .stui-pannel,
  .addition-content,
  .list-nav,
  .white,
  .kscont,
  .footer .width1200 {
    width: calc(100% - 10px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .head_box {
    margin-top: 8px !important;
    border-radius: 12px !important;
  }

  .header {
    padding: 10px !important;
    gap: 10px !important;
  }

  .header_left a,
  .header_left img {
    max-width: 168px !important;
    height: 40px !important;
  }

  .header_list {
    display: none !important;
  }

  .header_submit_b input[type=text] {
    height: 38px;
    line-height: 38px;
    font-size: 13px;
    border-radius: 9px 0 0 9px;
  }

  .header_submit_b input[type=submit] {
    flex: 0 0 72px;
    width: 72px;
    height: 38px;
    font-size: 13px;
    border-radius: 0 9px 9px 0;
  }

  /* 分类：2列更稳，避免横向滚动 */
  .nav {
    margin: 6px !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .nav .width1200 {
    width: 100% !important;
    padding: 0 !important;
  }

  .nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    white-space: normal !important;
  }

  .nav ul li {
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 9px !important;
  }

  .nav ul li a {
    font-size: 12.5px !important;
  }

  .announce-panel {
    margin-top: 10px !important;
  }

  .notice-head {
    padding: 10px 12px !important;
  }

  .notice-head .title {
    font-size: 16px !important;
  }

  .notice-body {
    padding: 10px !important;
    gap: 6px !important;
  }

  .notice-body p {
    font-size: 12px !important;
    line-height: 1.55 !important;
    padding: 8px 10px !important;
  }

  /* 手机列表：仅标题 + 时间，卡片式 */
  .videotitle,
  .addition-content .videotitle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 88px !important;
    column-gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .videotitle .category,
  .videotitle .address {
    display: none !important;
  }

  .videotitle .videoName {
    width: auto !important;
    font-size: 13px !important;
  }

  .videotitle .time {
    width: auto !important;
    text-align: right !important;
    font-size: 12px !important;
  }

  .videoContent,
  .addition-content .videoContent {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 0 0 12px 12px !important;
  }

  .addition-content .videoContent li,
  .videoContent li {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 88px !important;
    column-gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.45 !important;
    float: none !important;
    box-sizing: border-box !important;
  }

  .videoContent .category,
  .videoContent .address,
  .addition-content .videoContent .category,
  .addition-content .videoContent .address {
    display: none !important;
  }

  .videoContent .videoName,
  .addition-content .videoContent .videoName {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: #1d2d4f !important;
  }

  .videoContent .videoName .new,
  .addition-content .videoContent .videoName .new {
    height: 12px !important;
    width: auto !important;
    vertical-align: -1px;
    margin-right: 3px;
  }

  .videoContent .time,
  .addition-content .videoContent .time {
    display: block !important;
    width: auto !important;
    text-align: right !important;
    font-size: 11.5px !important;
    color: #7a89a8 !important;
    white-space: nowrap !important;
  }

  .videoContent .time font {
    color: #e45757 !important;
    font-size: 11.5px !important;
  }

  /* 分页 */
  .pages,
  .kscont {
    width: calc(100% - 10px) !important;
    max-width: 100% !important;
    padding: 10px 6px !important;
    font-size: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .pages a,
  .pages span,
  .pagelink_b {
    display: inline-block !important;
    margin: 2px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  /* 详情页 */
  .list-nav.detail-breadcrumb {
    padding: 10px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    word-break: break-all;
  }

  .detail-card {
    padding: 10px !important;
  }

  .detail-desc-card p {
    margin: 0 !important;
    word-break: break-word;
  }

  .detail-play-card .play-group {
    margin: 10px 6px 12px !important;
  }

  .detail-play-card .playlist {
    padding: 8px !important;
  }

  .detail-play-card .text-style {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 0 !important;
  }

  .detail-play-card .copy_text {
    width: 100% !important;
    font-size: 12px !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  .detail-play-card .bugs,
  .detail-play-card .copy-all-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  .detail-play-card .copy-tip {
    width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 12px !important;
  }

  .player-card {
    min-height: 240px !important;
    padding: 8px !important;
  }

  .player-card iframe,
  .player-card video,
  .player-card object,
  .player-card embed,
  .player-card #player,
  .player-card .MacPlayer,
  .player-card .MacPlayerBox,
  .player-card .dplayer {
    min-height: 200px !important;
    height: 56.25vw !important;
    max-height: 280px !important;
  }

  .footer {
    margin-top: 14px !important;
  }

  .footer p {
    font-size: 11px !important;
    line-height: 1.6 !important;
    padding: 0 8px !important;
  }
}

/* responsive: small phone */
@media (max-width: 380px) {
  .nav ul {
    grid-template-columns: 1fr 1fr !important;
  }

  .header_left a,
  .header_left img {
    max-width: 140px !important;
    height: 36px !important;
  }

  .videotitle,
  .addition-content .videoContent li,
  .videoContent li {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .videoContent .videoName,
  .addition-content .videoContent .videoName {
    font-size: 13px !important;
  }
}


/* hermes player layout fix */
.player-wrap{position:relative;width:100%;background:#000;overflow:hidden;aspect-ratio:16/9}
.player-wrap .MacPlayer,.player-wrap #playleft{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:0!important}
.player-wrap iframe,.player-wrap video,.player-wrap .MacPlayer iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0!important;display:block}


/* hermes player-card fill */
.player-card{position:relative!important;width:100%!important;min-height:200px;aspect-ratio:16/9;background:#000;overflow:hidden}
.player-card .MacPlayer,.player-card #playleft,.player-card .player-wrap{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important}
.player-card iframe,.player-card video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;display:block!important}


/* =========================================================
   jingpinx.com beauty layer v=jpxbeauty20260723
   premium blue-gold resource station
   ========================================================= */
:root{
  --bg:#eef2ff;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --primary:#1d4ed8;
  --primary2:#2563eb;
  --gold:#f59e0b;
  --gold2:#fbbf24;
  --danger:#e11d48;
  --shadow:0 14px 36px rgba(15,23,42,.10);
  --shadow-sm:0 6px 16px rgba(15,23,42,.07);
  --radius:16px;
  --wrap:1080px;
  --trans:.2s cubic-bezier(.2,.7,.2,1);
}

html{scroll-behavior:smooth}
body{
  color:var(--text)!important;
  background:
    radial-gradient(1000px 420px at 10% -8%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(900px 380px at 95% 0%, rgba(245,158,11,.12), transparent 55%),
    radial-gradient(700px 360px at 50% 100%, rgba(99,102,241,.08), transparent 50%),
    linear-gradient(180deg,#eef2ff 0%, #f8fafc 45%, #eef2ff 100%)!important;
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif!important;
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(180deg,#000,transparent 88%);
}
body>*{position:relative;z-index:1}

/* ads */
body>a img,
a>img[src*="ad_banner"],
a>img[src*="123.gif"],
a>img[src*="1233.gif"]{
  border-radius:14px!important;
  box-shadow:0 10px 28px rgba(15,23,42,.12)!important;
  max-width:min(1080px, calc(100% - 24px))!important;
  margin-left:auto!important;margin-right:auto!important;
}

.width1200,
.head_box,
.stui-pannel,
.addition-content,
.list-nav,
.white,
.kscont{
  width:min(var(--wrap), calc(100% - 24px))!important;
  max-width:var(--wrap)!important;
}

.head_box,
.stui-pannel,
.list-nav,
.white,
.announce-panel{
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(226,232,240,.95)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:saturate(140%) blur(8px);
  overflow:hidden;
}

/* header */
.head_box{margin-top:14px!important}
.header{
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
  min-height:88px!important;
  height:auto!important;
  padding:14px 18px!important;
  margin:0!important;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(239,246,255,.92))!important;
}
.header_left{flex:0 0 auto!important;max-width:240px!important}
.header_left a,.header_left img{
  display:block!important;
  height:52px!important;
  width:auto!important;
  max-width:220px!important;
  border-radius:12px!important;
  object-fit:contain!important;
  box-shadow:0 6px 16px rgba(37,99,235,.12)!important;
  background:transparent!important;
}
.header_right{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
.header_submit,.header_submit_b{
  width:100%!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}

/* search split */
#search.search-form,
.header_submit_b form#search,
.header_submit_b form{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  border-radius:0!important;
  padding:0!important;
}
.search-input,
#search .search-input,
#search input.mac_wd,
.header_submit_b input.search-input,
.header_submit_b input.mac_wd,
.header_submit_b input[type="text"]{
  flex:1 1 auto!important;
  min-width:0!important;
  height:46px!important;
  line-height:46px!important;
  margin:0!important;
  padding:0 18px!important;
  border:1px solid #bfdbfe!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(37,99,235,.06)!important;
  color:#0f172a!important;
  font-size:14px!important;
  outline:none!important;
}
.search-input:focus,
#search input.mac_wd:focus,
.header_submit_b input[type="text"]:focus{
  border-color:#2563eb!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.14), 0 4px 14px rgba(37,99,235,.08)!important;
}
.search-button,
#searchbutton,
#search .search-button,
#search button.search-button,
#search button.mac_search,
.header_submit_b .search-button,
.header_submit_b input.search-button,
.header_submit_b input[type="submit"],
.header_submit_b button.mac_search{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:96px!important;
  height:46px!important;
  margin:0!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#1d4ed8,#2563eb 55%,#3b82f6)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.5px!important;
  cursor:pointer!important;
  box-shadow:0 8px 18px rgba(37,99,235,.28)!important;
  line-height:46px!important;
}
.search-button:hover,
#searchbutton:hover{filter:brightness(1.05);transform:translateY(-1px)}

.header_list ul{
  display:flex!important;gap:14px!important;flex-wrap:wrap!important;
  margin:0!important;padding:0 4px!important;list-style:none!important;
}
.header_list li{float:none!important;width:auto!important;margin:0!important;padding:0!important;background:transparent!important}
.header_list li p,.header_list font{margin:0!important;font-size:12px!important;font-weight:800!important;color:#1d4ed8!important}

/* nav */
.nav,.list-nav{margin-top:12px!important;overflow:hidden}
.nav ul,.list-nav ul{
  display:flex!important;flex-wrap:wrap!important;gap:8px!important;
  padding:10px!important;margin:0!important;list-style:none!important;
  background:linear-gradient(120deg,#1e3a8a 0%, #1d4ed8 42%, #3b82f6 72%, #f59e0b 100%)!important;
  border-radius:14px!important;
}
.nav ul li,.list-nav ul li{
  float:none!important;width:auto!important;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;
}
.nav ul li a,.list-nav ul li a,.nav a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:34px!important;padding:0 14px!important;border-radius:10px!important;
  color:rgba(255,255,255,.94)!important;font-weight:800!important;font-size:13px!important;
  background:transparent!important;border:1px solid transparent!important;
  transition:all var(--trans)!important;white-space:nowrap;
}
.nav ul li a:hover,.list-nav ul li a:hover{background:rgba(255,255,255,.16)!important;color:#fff!important;transform:translateY(-1px)}
.nav ul li a span{color:#fff!important}

/* notice */
.notice-head{
  padding:14px 18px!important;
  background:linear-gradient(135deg,#f59e0b,#fbbf24 55%,#fcd34d)!important;
  border-bottom:1px solid #fcd34d!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
}
.notice-head .title,
.notice-head h3.title{
  margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;
  color:#fff!important;font-size:20px!important;font-weight:900!important;
  text-shadow:0 1px 0 rgba(0,0,0,.12)!important;
  -webkit-text-fill-color:#fff!important;
}
.notice-head .title::before{display:none!important;content:none!important}
.notice-meta,.notice-head .text-muted,.notice-head a{color:#fff!important;font-weight:700!important}
.notice-head a{text-decoration:underline!important;text-underline-offset:2px}
.notice-body{padding:14px 16px 16px!important;background:#fff!important}
.notice-body p{
  margin:0 0 10px!important;color:#1e293b!important;
  background:#fffbeb!important;border:1px solid #fde68a!important;
  border-radius:10px!important;padding:8px 12px!important;line-height:1.8!important;
  word-break:break-all;
}
.notice-body .text-red,
.notice-body a.text-red{color:#b45309!important;font-weight:800!important}

/* list */
.addition-content,.addition-content.page-index{
  margin-top:14px!important;margin-bottom:0!important;padding-bottom:0!important;
  border-radius:var(--radius)!important;overflow:hidden!important;
  background:#fff!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;
}
.videotitle.table-head,p.videotitle.table-head{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  color:#fff!important;border:0!important;margin:0!important;
}
.videotitle.table-head span,.videotitle.table-head .header-col,
.videotitle.table-head .category,.videotitle.table-head .address,.videotitle.table-head .time{
  color:#fff!important;font-weight:800!important;
}
.videoContent li,.addition-content .videoContent li{
  border-bottom:1px solid #f1f5f9!important;background:transparent!important;
  transition:background var(--trans)!important;
}
.videoContent li:nth-child(even),.addition-content .videoContent li:nth-child(even){
  background:rgba(239,246,255,.55)!important;
}
.videoContent li:hover,.addition-content .videoContent li:hover{
  background:linear-gradient(90deg,#eff6ff,#f8fafc)!important;
}
.videoContent .videoName a,.videoName a{color:#1e40af!important;font-weight:800!important}
.videoContent .videoName a:hover{color:#2563eb!important}
.videoContent .time font,.time font{color:#e11d48!important;font-weight:700!important}

/* paging tight */
.addition-content + .clear,.clear{
  height:0!important;margin:0!important;padding:0!important;
  line-height:0!important;font-size:0!important;overflow:hidden!important;
}
.kscont{
  margin:8px auto 16px!important;padding:0!important;
  min-height:0!important;height:auto!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
.pages{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;
  gap:8px!important;width:100%!important;margin:0 auto!important;padding:12px 14px!important;
  min-height:0!important;height:auto!important;line-height:1.5!important;
  font-size:13px!important;font-weight:700!important;color:#1e3a8a!important;
  background:#fff!important;border:1px solid #bfdbfe!important;border-radius:14px!important;
  box-shadow:0 8px 20px rgba(15,23,42,.06)!important;overflow:visible!important;
}
.pages a,.pages span,.pages .pagelink_b{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:34px!important;height:34px!important;margin:0!important;padding:0 10px!important;
  border-radius:10px!important;border:1px solid #bfdbfe!important;background:#fff!important;
  color:#1d4ed8!important;font-size:13px!important;font-weight:800!important;
  line-height:1!important;float:none!important;text-decoration:none!important;
}
.pages a:hover{border-color:#2563eb!important;background:#eff6ff!important;color:#1d4ed8!important}
.pages a.pagenow,.pages .pagenow,.pages span.active{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 6px 14px rgba(37,99,235,.28)!important;
}

/* detail/player */
.detail-play-card,.player-card,.content-detail{
  border-radius:var(--radius)!important;box-shadow:var(--shadow-sm)!important;
  border:1px solid var(--line)!important;overflow:hidden;
}
.player-card{background:#000!important}

/* buttons */
.layui-btn,.copy-all-btn,a.btn{
  border-radius:999px!important;font-weight:800!important;
}
.layui-btn-normal,.copy-all-btn{
  background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 8px 18px rgba(37,99,235,.25)!important;
}

/* footer */
.footer{
  margin:24px auto 28px!important;padding:18px 14px!important;text-align:center!important;
  background:rgba(255,255,255,.96)!important;border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow-sm)!important;
  width:min(var(--wrap), calc(100% - 24px))!important;
}
.footer p,.footer a{color:var(--muted)!important;font-size:12px!important;line-height:1.8!important}
.footer a:hover{color:var(--primary)!important}
a{color:#1d4ed8}
a:hover{color:#2563eb}

@media (max-width:768px){
  body{overflow-x:hidden!important}
  .width1200,.head_box,.stui-pannel,.addition-content,.list-nav,.white,.kscont,.footer{
    width:calc(100% - 16px)!important;margin-left:auto!important;margin-right:auto!important;
  }
  .header{flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:12px!important;min-height:auto!important}
  .header_left{display:flex!important;justify-content:center!important;max-width:none!important}
  .header_left img{height:44px!important;margin:0 auto}
  .nav ul,.list-nav ul{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;padding:8px!important}
  .nav ul li a{width:100%!important;padding:0 6px!important;font-size:12px!important;min-height:32px!important}
  .notice-head{flex-direction:column!important;align-items:flex-start!important;gap:6px!important;padding:12px!important}
  .notice-head .title{font-size:17px!important}
  #search.search-form,.header_submit_b form{gap:8px!important}
  .search-input,#search input.mac_wd,.search-button,#searchbutton{height:42px!important;line-height:42px!important}
  .search-button,#searchbutton{min-width:78px!important;padding:0 14px!important}
  .pages{padding:10px!important;gap:6px!important}
  .pages a,.pages .pagelink_b{min-width:30px!important;height:30px!important;font-size:12px!important}
}
@media (max-width:420px){
  .nav ul,.list-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* =========================================================
   list + footer coord fix v=jpxlist20260723
   ========================================================= */

/* --- video list: single card, aligned columns --- */
.addition-content.page-index,
.addition-content{
  margin-top:14px !important;
  margin-bottom:0 !important;
  padding:0 !important;
  border:1px solid #dbeafe !important;
  border-radius:16px !important;
  box-shadow:0 12px 32px rgba(30,64,175,.08) !important;
  background:#fff !important;
  overflow:hidden !important;
}

/* kill nested double card on ul */
.addition-content .videoContent,
.videoContent.list-card,
ul.videoContent{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  list-style:none !important;
}

/* unified 4-col grid for head + rows */
.videotitle,
.videotitle.table-head,
p.videotitle.table-head,
.videoContent li,
.addition-content .videoContent li{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) 120px 108px 118px !important;
  column-gap:12px !important;
  align-items:center !important;
  float:none !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.videotitle,
.videotitle.table-head,
p.videotitle.table-head{
  margin:0 !important;
  padding:13px 18px !important;
  background:linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%) !important;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.3px !important;
}
.videotitle span,
.videotitle .videoName,
.videotitle .header-col,
.videotitle .category,
.videotitle .address,
.videotitle .time{
  color:#fff !important;
  font-weight:800 !important;
  text-align:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.videotitle .videoName,
.videotitle .header-col{
  text-align:left !important;
  padding-left:2px !important;
}
.videotitle .time{ text-align:right !important; padding-right:2px !important; }

.videoContent li,
.addition-content .videoContent li{
  min-height:52px !important;
  height:auto !important;
  padding:11px 18px !important;
  margin:0 !important;
  border-bottom:1px solid #eef2ff !important;
  background:#fff !important;
  transition: background .18s ease !important;
}
.videoContent li:nth-child(even),
.addition-content .videoContent li:nth-child(even){
  background:#f8fbff !important;
}
.videoContent li:hover,
.addition-content .videoContent li:hover{
  background:#eff6ff !important;
}
.videoContent li:last-child{
  border-bottom:0 !important;
}

/* title cell */
.videoContent .videoName,
.addition-content .videoContent .videoName,
a.videoName{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  color:#1e3a8a !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  text-decoration:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.videoContent .videoName:hover,
a.videoName:hover{
  color:#2563eb !important;
}
/* soften/hide fire gif for cleaner look */
.videoContent .videoName .new,
.videoContent .videoName img.new,
a.videoName img{
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  opacity:.85 !important;
  object-fit:contain !important;
}

/* category pill */
.videoContent .category,
.addition-content .videoContent .category{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:4px 10px !important;
  border-radius:999px !important;
  border:1px solid #bfdbfe !important;
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* enter button - match blue theme, compact */
.videoContent .address,
.addition-content .videoContent a.address,
a.address{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  justify-self:center !important;
  width:auto !important;
  min-width:84px !important;
  height:32px !important;
  margin:0 auto !important;
  padding:0 12px !important;
  float:none !important;
  border:1px solid #93c5fd !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#ffffff,#eff6ff) !important;
  color:#1d4ed8 !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:0 2px 6px rgba(37,99,235,.08) !important;
  transition: all .18s ease !important;
  box-sizing:border-box !important;
}
.videoContent .address:hover,
a.address:hover{
  background:linear-gradient(135deg,#1d4ed8,#2563eb) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(37,99,235,.25) !important;
}

/* date */
.videoContent .time,
.addition-content .videoContent .time{
  display:block !important;
  text-align:right !important;
  justify-self:end !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
}
.videoContent .time font,
.videoContent .time font[color],
.time font{
  color:#e11d48 !important;
  font-weight:800 !important;
  font-size:13px !important;
}

/* --- footer compact --- */
.footer{
  width:min(1080px, calc(100% - 24px)) !important;
  max-width:1080px !important;
  height:auto !important;
  min-height:0 !important;
  margin:12px auto 24px !important;
  padding:14px 16px !important;
  float:none !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid #e2e8f0 !important;
  border-radius:14px !important;
  box-shadow:0 6px 16px rgba(15,23,42,.05) !important;
  text-align:center !important;
  overflow:visible !important;
}
.footer .width1200,
.footer-inner{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  float:none !important;
}
.footer_right,
.footer .footer_right{
  width:100% !important;
  float:none !important;
  margin:0 !important;
  text-align:center !important;
}
.footer ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  overflow:visible !important;
}
.footer ul:empty{ display:none !important; height:0 !important; margin:0 !important; }
.footer p,
.footer_right p,
.footer-inner p{
  clear:none !important;
  margin:0 0 6px !important;
  padding:0 !important;
  line-height:1.65 !important;
  color:#64748b !important;
  font-size:12px !important;
  float:none !important;
}
.footer p:last-child,
.footer-inner p:last-child{ margin-bottom:0 !important; }
.footer a{ color:#2563eb !important; font-weight:700 !important; }

/* mobile list cards */
/* removed broken mobile list block */


/* =========================================================
   header clip fix v=jpxclip20260723  — 更新时间穿模
   ========================================================= */
.addition-content.page-index,
.addition-content{
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* 表头自身裁切圆角内，禁止子项溢出 */
.videotitle,
.videotitle.table-head,
p.videotitle.table-head{
  display:grid !important;
  /* 时间列略收，避免挤出圆角 */
  grid-template-columns: minmax(0, 1fr) 110px 100px 100px !important;
  column-gap:10px !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:12px 14px !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:0 !important; /* 由外层 addition-content 裁切圆角 */
}

.videotitle > span,
.videotitle .videoName,
.videotitle .header-col,
.videotitle .category,
.videotitle .address,
.videotitle .time{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
}

.videotitle .time{
  text-align:right !important;
  padding-right:4px !important;
  /* 防止被字重/字距撑破格子 */
  letter-spacing:0 !important;
  font-size:13px !important;
}

/* 行与表头同列宽，整体对齐 */
.videoContent li,
.addition-content .videoContent li{
  grid-template-columns: minmax(0, 1fr) 110px 100px 100px !important;
  column-gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  padding:11px 14px !important;
  overflow:hidden !important;
}

.videoContent .time,
.addition-content .videoContent .time{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  padding-right:4px !important;
  font-size:12.5px !important;
}

.videoContent .category,
.videoContent .address,
a.address{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* 小屏表头不隐藏时同样防穿模 */
@media (max-width:900px){
  .videotitle,
  .videotitle.table-head,
  p.videotitle.table-head,
  .videoContent li,
  .addition-content .videoContent li{
    grid-template-columns: minmax(0, 1fr) 96px 88px 92px !important;
    column-gap:8px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .videotitle .time,
  .videoContent .time{ font-size:12px !important; }
}

/* =========================================================
   mobile list SHOW fix v=jpxmob20260723
   ========================================================= */
@media (max-width: 900px) {
  /* container must stay visible */
  .addition-content,
  .addition-content.page-index,
  .videoContent,
  .videoContent.list-card,
  ul.videoContent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: relative !important;
  }

  /* keep blue header readable on tablet; on phone hide and use cards */
  .videotitle,
  .videotitle.table-head,
  p.videotitle.table-head {
    display: grid !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(72px, 0.7fr) minmax(72px, 0.7fr) minmax(78px, 0.7fr) !important;
    column-gap: 6px !important;
    padding: 10px 10px !important;
    overflow: hidden !important;
  }
  .videotitle > span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }
}

@media (max-width: 768px) {
  .addition-content,
  .addition-content.page-index {
    display: block !important;
    width: calc(100% - 12px) !important;
    margin: 10px auto !important;
    overflow: hidden !important;
  }

  /* phone: card rows */
  .videotitle,
  .videotitle.table-head,
  p.videotitle.table-head {
    display: none !important;
  }

  .videoContent,
  ul.videoContent,
  .videoContent.list-card {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  .videoContent li,
  .addition-content .videoContent li,
  ul.videoContent > li {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 12px !important;
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    border-bottom: 1px solid #e8eefc !important;
    background: #fff !important;
  }

  .videoContent li:nth-child(even) {
    background: #f8fbff !important;
  }

  .videoContent .videoName,
  .addition-content .videoContent .videoName,
  a.videoName,
  ul.videoContent li > a.videoName {
    display: block !important;
    visibility: visible !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 22px !important;
    height: auto !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    float: none !important;
    overflow: hidden !important;
    color: #1e3a8a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    word-break: break-word !important;
  }

  .videoContent .videoName img,
  a.videoName img,
  .videoContent .videoName .new {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    vertical-align: -2px !important;
    margin-right: 4px !important;
  }

  .videoContent .category,
  .videoContent .address,
  .videoContent a.address,
  .videoContent .time,
  .addition-content .videoContent .category,
  .addition-content .videoContent .address,
  .addition-content .videoContent .time {
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 28px !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .videoContent .category {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    border: 1px solid #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  .videoContent .address,
  .videoContent a.address,
  a.address {
    min-width: 72px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 28px !important;
    text-decoration: none !important;
  }

  .videoContent .time {
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #e11d48 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  .videoContent .time font {
    color: #e11d48 !important;
    font-size: 12px !important;
  }
}