: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
    }

    * {
      box-sizing: border-box;
      margin: 2px;
      padding: 2px
    }

    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;
      min-height: 100vh;
      display: flex;
      flex-direction: column
    }

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

    img {
      display: block
    }

    .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: 0 auto
    }

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

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

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

    .cyan-site-nav {
      display: flex;
      justify-content: flex-start;
      overflow-x: auto
    }

    .cyan-site-link {
      font-size: 14px;
      color: #d8fbff;
      white-space: nowrap
    }

    .cyan-page-head {
      background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-primary));
      color: #fff;
      border-bottom: 2px solid var(--cyan-accent)
    }

    .cyan-page-title {
      font-size: 18px
    }

    .cyan-filter-panel {
      display: grid;
      background: #fff;
      border-top: 1px solid var(--cyan-line);
      border-bottom: 1px solid var(--cyan-line)
    }

    .cyan-filter-row {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr)
    }

    .cyan-filter-label {
      color: var(--cyan-primary);
      font-weight: 700
    }

    .cyan-filter-scroll {
      display: flex;
      overflow-x: auto
    }

    .cyan-filter-btn {
      border: 0;
      border-bottom: 2px solid transparent;
      background: #fff;
      color: var(--cyan-muted);
      white-space: nowrap
    }

    .cyan-filter-btn.cyan-filter-active {
      border-bottom-color: var(--cyan-primary);
      color: var(--cyan-primary);
      font-weight: 700;
      background: var(--cyan-soft)
    }

    .cyan-live-list {
      display: grid
    }

    .cyan-live-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 44px;
      grid-template-areas: "home mid away btn" "league league league league";
      align-items: center;
      background: var(--cyan-row);
      border-bottom: 1px solid var(--cyan-line);
      min-width: 0
    }

    .cyan-live-team {
      grid-area: home;
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: hidden
    }

    .cyan-live-away {
      grid-area: away;
      justify-content: flex-end;
      text-align: right
    }

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

    .cyan-live-name {
      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-btn {
      grid-area: btn;
      background: var(--cyan-deep);
      color: #fff;
      text-align: center;
      white-space: normal;
      line-height: 1.2
    }

    .cyan-live-time {
      flex: 0 0 auto;
      color: var(--cyan-primary);
      font-weight: 700;
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .cyan-live-league {
      grid-area: league;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--cyan-muted);
      border-top: 1px dashed var(--cyan-line);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .cyan-live-league-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .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
    }

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

    @media (min-width:1024px) {

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

      .cyan-site-headwrap {
        grid-template-columns: auto 1fr
      }

      .cyan-site-nav {
        justify-content: flex-end
      }

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

      .cyan-live-list {
        grid-template-columns: repeat(2, 1fr)
      }

      .cyan-live-row {
        grid-template-columns: 1fr 42px 1fr 66px;
        grid-template-areas: "home mid away btn" "league league league league"
      }

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