:root {
      --cyan-primary: #0891b2;
      --cyan-accent: #22d3ee;
      --cyan-deep: #172554;
      --cyan-bg: #eef7f9;
      --cyan-ink: #111827;
      --cyan-muted: #64748b;
      --cyan-line: #c7d7df;
      --cyan-soft: #dff7fb;
      --cyan-row: #f8fcfd;
      --cyan-warn: #f59e0b
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      width: 100%;
      overflow-x: hidden
    }

    body.cyan-shell-body {
      font-size: 14px;
      line-height: 1.45;
      color: var(--cyan-ink);
      background: var(--cyan-bg);
      font-family: Arial, "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column
    }

    .cyan-shell-body > .cyan-site-header,
    .cyan-shell-body > .cyan-site-footer {
      width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      display: block;
      max-width: 100%
    }

    .cyan-site-header {
      background: var(--cyan-deep);
      color: #fff;
      border-bottom: 2px solid var(--cyan-accent)
    }

    .cyan-site-headwrap,
    .cyan-site-footwrap,
    .cyan-main-wrap {
      width: 100%;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      float: none;
      min-width: 0
    }

    .cyan-site-headwrap {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      padding: 10px 12px
    }

    .cyan-site-brand,
    .cyan-site-footbrand {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.4
    }

    .cyan-site-nav {
      display: flex;
      justify-content: flex-start;
      overflow-x: auto;
      white-space: nowrap;
      gap: 14px;
      width: auto
    }

    .cyan-site-link {
      font-size: 14px;
      color: #d8fbff;
      border-bottom: 2px solid transparent;
      padding: 6px 0
    }

    .cyan-site-link.cyan-nav-active {
      border-bottom-color: var(--cyan-accent);
      color: #fff
    }

    .cyan-main-wrap {
      display: grid;
      gap: 10px;
      padding: 10px 10px 0;
      justify-self: center;
      min-width: 0;
      overflow: hidden;
      align-items: start
    }

    .cyan-shell-body > .cyan-main-wrap {
      flex: 1 0 auto
    }

    .cyan-main-wrap > * {
      width: 100%;
      max-width: 100%;
      min-width: 0
    }

    .cyan-channel {
      background: #fff;
      border-top: 3px solid var(--cyan-primary);
      border-bottom: 1px solid var(--cyan-line);
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden
    }

    .cyan-channel-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      background: linear-gradient(90deg, var(--cyan-soft), #fff);
      padding: 8px 10px;
      gap: 8px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden
    }

    .cyan-channel-kicker {
      color: #fff;
      background: var(--cyan-primary);
      font-weight: 700;
      padding: 3px 8px;
      line-height: 1.2
    }

    .cyan-channel-title {
      font-size: 18px;
      font-weight: 700;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cyan-channel-more {
      font-size: 14px;
      color: var(--cyan-primary);
      text-align: right
    }

    .cyan-live-grid {
      display: grid;
      width: 100%;
      min-width: 0;
      overflow: hidden
    }

    .cyan-live-line {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 68px 44px;
      grid-template-areas: "home mid away time action";
      align-items: center;
      border-top: 1px solid var(--cyan-line);
      background: var(--cyan-row);
      min-width: 0;
      width: 100%;
      max-width: 100%;
      gap: 6px;
      padding: 8px 10px
    }

    .cyan-live-team {
      grid-area: home;
      display: flex;
      align-items: center;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      gap: 6px
    }

    .cyan-live-away {
      grid-area: away;
      justify-content: flex-end;
      text-align: right;
      min-width: 0;
      max-width: 100%
    }

    .cyan-live-logo {
      width: 30px;
      height: 30px;
      object-fit: contain;
      flex: 0 0 30px
    }

    .cyan-live-name,
    .cyan-news-title,
    .cyan-topic-title {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0
    }

    .cyan-live-mid {
      grid-area: mid;
      text-align: center;
      color: var(--cyan-muted);
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cyan-live-action {
      grid-area: action;
      border: 1px solid var(--cyan-primary);
      color: var(--cyan-primary);
      background: #fff;
      text-align: center;
      white-space: normal;
      line-height: 1.2;
      padding: 4px 6px;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .cyan-live-time {
      grid-area: time;
      color: var(--cyan-muted);
      text-align: center;
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .cyan-news-feed {
      display: grid;
      width: 100%;
      min-width: 0;
      overflow: hidden
    }

    .cyan-news-item {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) 54px;
      align-items: center;
      border-top: 1px solid var(--cyan-line);
      background: #fff;
      gap: 8px;
      padding: 8px 10px;
      min-width: 0;
      width: 100%;
      max-width: 100%
    }

    .cyan-news-no {
      background: var(--cyan-deep);
      color: #fff;
      text-align: center;
      line-height: 22px
    }

    .cyan-news-date,
    .cyan-topic-meta {
      color: var(--cyan-muted);
      white-space: nowrap
    }

    .cyan-topic-strip {
      display: grid;
      grid-template-columns: 1fr;
      border-top: 1px solid var(--cyan-line);
      background: #fff;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden
    }

    .cyan-topic-pill {
      display: grid;
      grid-template-columns: 4px minmax(0, 1fr);
      border-bottom: 1px solid var(--cyan-line);
      min-width: 0
    }

    .cyan-topic-pill > span:last-child {
      display: grid;
      gap: 2px;
      padding: 8px
    }

    .cyan-topic-mark {
      background: var(--cyan-accent)
    }

    .cyan-site-footer {
      margin-top: auto;
      background: var(--cyan-deep);
      color: #d8fbff
    }

    .cyan-site-footwrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      gap: 8px
    }

    .cyan-site-foottext {
      font-size: 14px;
      color: #b8e7ee
    }

    @media (min-width:1024px) {

      body.cyan-shell-body,
      .cyan-site-link,
      .cyan-channel-more,
      .cyan-site-foottext {
        font-size: 16px
      }

      .cyan-site-headwrap {
        grid-template-columns: auto minmax(0, 1fr);
        width: 1100px;
        max-width: calc(100vw - 24px);
        margin-left: auto;
        margin-right: auto
      }

      .cyan-site-nav {
        justify-content: flex-end;
        gap: 28px
      }

      .cyan-main-wrap {
        width: 1100px;
        max-width: calc(100vw - 24px);
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        justify-self: auto;
        overflow: hidden
      }

      .cyan-site-footwrap {
        width: 1100px;
        max-width: calc(100vw - 24px);
        margin-left: auto;
        margin-right: auto
      }

      .cyan-site-brand,
      .cyan-site-footbrand,
      .cyan-channel-title {
        font-size: 20px
      }

      .cyan-live-line {
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 92px 76px;
        grid-template-areas: "home mid away time action";
        gap: 12px
      }

      .cyan-live-team,
      .cyan-live-mid,
      .cyan-live-time,
      .cyan-live-action {
        grid-area: auto
      }

      .cyan-live-action {
        white-space: nowrap
      }

      .cyan-news-item {
        grid-template-columns: 22px minmax(0, 1fr) 70px
      }

      .cyan-topic-strip {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        min-width: 0;
        max-width: 100%
      }

      .cyan-topic-pill {
        grid-template-columns: 4px 190px;
        min-width: 200px;
        border-right: 1px solid var(--cyan-line);
        border-bottom: 0
      }
    }