.cs-network-preview{
  margin:22px 0;

  padding:0;

  background:
    var(--csn-page-bg);

  color:
    var(--csn-text);

  font-family:inherit;
}

.cs-network-preview *{
  box-sizing:border-box;
}

.csn-panel{
  overflow:hidden;

  background:
    var(--csn-section-bg);

  color:
    var(--csn-text);

  border:
    1px solid
    var(--csn-section-border);

  border-radius:
    var(--csn-section-radius);

  box-shadow:
    var(--csn-section-shadow);
}

.csn-panel + .csn-panel{
  margin-top:18px;
}

.csn-head{
  min-height:64px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  padding:14px 18px;

  background:
    var(--csn-head-bg);

  border-bottom:
    1px solid
    var(--csn-section-border);
}

.csn-title-wrap{
  min-width:0;

  display:flex;
  align-items:center;

  gap:11px;
}

.csn-icon{
  width:42px;
  height:42px;

  flex:0 0 42px;

  display:grid;
  place-items:center;

  border-radius:
    var(--csn-card-radius);

  background:
    var(--csn-card-bg);

  border:
    1px solid
    var(--csn-card-border);

  color:
    var(--csn-heading);

  font-size:20px;
}

.csn-title{
  color:
    var(--csn-heading);

  font-size:21px;

  font-weight:800;

  line-height:1.25;
}

.csn-subtitle{
  margin-top:3px;

  color:
    var(--csn-text);

  opacity:.70;

  font-size:13px;
}

.csn-visitor-pill{
  display:inline-flex;

  align-items:center;

  margin-left:7px;

  padding:4px 9px;

  border-radius:999px;

  background:
    var(--csn-card-bg);

  border:
    1px solid
    var(--csn-card-border);

  color:
    var(--csn-card-text);

  font-size:12px;

  font-weight:700;
}

.csn-button{
  appearance:none;

  min-height:38px;

  padding:0 14px;

  border-radius:9px;

  background:
    var(--csn-button-bg);

  color:
    var(--csn-button-text);

  border:
    1px solid
    var(--csn-button-border);

  font-family:inherit;

  font-size:13px;

  font-weight:800;

  cursor:pointer;
}

.csn-button:disabled{
  opacity:.60;
  cursor:default;
}

.csn-body{
  padding:16px;

  background:
    var(--csn-section-bg);
}

.csn-ip-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:12px;
}

.csn-ip-card{
  position:relative;

  min-height:190px;

  padding:
    18px 18px 16px 23px;

  overflow:hidden;

  background:
    var(--csn-card-bg);

  color:
    var(--csn-card-text);

  border:
    1px solid
    var(--csn-card-border);

  border-radius:
    var(--csn-card-radius);
}

.csn-ip-card::before{
  content:"";

  position:absolute;

  left:0;
  top:16px;
  bottom:16px;

  width:3px;

  border-radius:
    0 4px 4px 0;

  background:
    var(--csn-button-bg);
}

.csn-card-top{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  color:
    var(--csn-card-text);

  font-size:14px;

  font-weight:700;
}

.csn-card-status{
  padding:3px 8px;

  border-radius:999px;

  background:
    var(--csn-section-bg);

  border:
    1px solid
    var(--csn-card-border);

  color:
    var(--csn-heading);

  font-size:11px;

  font-weight:700;
}

.csn-ip{
  margin-top:16px;

  color:
    var(--csn-heading);

  font-size:25px;

  font-weight:900;

  overflow-wrap:anywhere;
}

.csn-location{
  min-height:22px;

  margin-top:8px;

  color:
    var(--csn-heading);

  font-size:16px;

  font-weight:700;
}

.csn-isp{
  min-height:20px;

  margin-top:5px;

  color:
    var(--csn-card-text);

  opacity:.72;

  font-size:13px;

  overflow-wrap:anywhere;
}

.csn-tags{
  display:flex;

  flex-wrap:wrap;

  gap:6px;

  margin-top:13px;
}

.csn-tag{
  padding:4px 8px;

  border:
    1px solid
    var(--csn-card-border);

  border-radius:7px;

  background:
    var(--csn-section-bg);

  color:
    var(--csn-card-text);

  font-size:11px;
}

.csn-divider{
  height:1px;

  margin:0 16px;

  background:
    var(--csn-section-border);
}

.csn-note{
  padding:
    0 16px 16px;

  background:
    var(--csn-section-bg);

  color:
    var(--csn-text);

  opacity:.68;

  font-size:12px;
}

.csn-probe-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}

.csn-probe{
  min-height:162px;

  padding:17px;

  background:
    var(--csn-card-bg);

  color:
    var(--csn-card-text);

  border:
    1px solid
    var(--csn-card-border);

  border-radius:
    var(--csn-card-radius);
}

.csn-probe-top{
  display:flex;

  align-items:center;

  gap:9px;
}

.csn-service-icon{
  width:36px;
  height:36px;

  display:grid;

  place-items:center;

  border-radius:9px;

  background:
    var(--csn-section-bg);

  border:
    1px solid
    var(--csn-card-border);

  color:
    var(--csn-heading);

  font-size:13px;

  font-weight:900;
}

.csn-service-name{
  flex:1;

  min-width:0;

  color:
    var(--csn-card-text);

  font-size:16px;

  font-weight:800;
}

.csn-mini-refresh{
  appearance:none;

  border:0;

  padding:4px;

  background:transparent;

  color:
    var(--csn-heading);

  font-size:17px;

  cursor:pointer;
}

.csn-probe-status{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:21px;
}

.csn-state{
  display:inline-flex;

  align-items:center;

  gap:7px;

  color:#36d17c;

  font-size:13px;

  font-weight:800;
}

.csn-state::before{
  content:"";

  width:8px;
  height:8px;

  border-radius:50%;

  background:currentColor;
}

.csn-state[data-state="bad"]{
  color:#ff6868;
}

.csn-state[data-state="wait"]{
  color:
    var(--csn-card-text);

  opacity:.62;
}

.csn-latency{
  color:
    var(--csn-heading);

  font-weight:900;
}

.csn-bars{
  height:36px;

  margin-top:13px;

  display:flex;

  align-items:flex-end;

  gap:5px;
}

.csn-bar{
  width:6px;

  min-height:6px;

  max-height:34px;

  border-radius:
    3px 3px 0 0;

  background:
    var(--csn-button-bg);

  opacity:.78;
}

.csn-hidden{
  display:none !important;
}

@media(max-width:1100px){
  .csn-probe-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){

  .cs-network-preview{
    margin:16px 0;
  }

  .csn-head{
    padding:12px 13px;
  }

  .csn-title{
    font-size:18px;
  }

  .csn-subtitle{
    display:none;
  }

  .csn-visitor-pill{
    display:block;

    width:max-content;

    max-width:100%;

    margin:5px 0 0;
  }

  .csn-icon{
    width:38px;
    height:38px;

    flex-basis:38px;
  }

  .csn-button{
    min-height:36px;

    padding:0 10px;
  }

  .csn-body{
    padding:11px;
  }

  .csn-ip-grid{
    grid-template-columns:1fr;

    gap:9px;
  }

  .csn-ip-card{
    min-height:160px;

    padding:
      15px 14px 14px 20px;
  }

  .csn-ip{
    margin-top:12px;

    font-size:22px;
  }

  .csn-probe-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:9px;
  }

  .csn-probe{
    min-height:145px;

    padding:14px;
  }
}

@media(max-width:480px){
  .csn-probe-grid{
    grid-template-columns:1fr;
  }
}

/* NETWORK CONNECTIVITY 8 SERVICES RESPONSIVE START */

/*
  PC:
  4 columns × 2 rows
*/
.csn-probe-grid{
  display:grid !important;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;

  gap:12px;
}

.csn-probe{
  min-width:0;
}

.csn-service-name{
  min-width:0;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


/*
  Tablet / H5:
  2 columns × 4 rows
*/
@media(max-width:1100px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:10px;
  }
}


/*
  Normal phone
*/
@media(max-width:760px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:9px;
  }

  .csn-probe{
    min-height:138px;

    padding:13px;
  }

  .csn-service-name{
    font-size:15px;
  }

  .csn-probe-status{
    margin-top:15px;
  }

  .csn-latency{
    font-size:13px;
  }

  .csn-bars{
    height:32px;

    margin-top:11px;
  }
}


/*
  Small phone:
  仍然保持两列，
  不允许变成一列。
*/
@media(max-width:480px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:8px;
  }

  .csn-probe{
    min-height:132px;

    padding:11px;
  }

  .csn-service-name{
    font-size:14px;
  }

  .csn-probe-status{
    margin-top:13px;

    gap:5px;
  }

  .csn-state{
    font-size:12px;
  }

  .csn-latency{
    font-size:12px;
  }

  .csn-bars{
    height:29px;

    gap:4px;
  }

  .csn-bar{
    width:5px;
  }
}


/*
  Very narrow phones:
  依旧两列。
*/
@media(max-width:360px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:7px;
  }

  .csn-probe{
    min-height:126px;

    padding:10px;
  }

  .csn-service-name{
    font-size:13px;
  }

  .csn-state{
    font-size:11px;
  }

  .csn-latency{
    font-size:11px;
  }
}

/* NETWORK CONNECTIVITY 8 SERVICES RESPONSIVE END */

/* NETWORK FINAL STATUS UI START */


/*
  PC = 4 × 2
*/
.csn-probe-grid{
  display:grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;

  gap:12px !important;
}


.csn-probe{
  min-width:0;

  min-height:158px;

  padding:17px 18px;

  background:
    var(--csn-card-bg);

  color:
    var(--csn-card-text);

  border:
    1px solid
    var(--csn-card-border);

  border-radius:
    var(--csn-card-radius);
}


.csn-probe-top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;
}


.csn-service-name{
  min-width:0;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:
    var(--csn-heading);

  font-size:17px;

  font-weight:800;
}


.csn-mini-refresh{
  flex:0 0 auto;

  appearance:none;

  border:0;

  background:transparent;

  color:
    var(--csn-heading);

  font-size:17px;

  cursor:pointer;

  opacity:.78;
}


.csn-probe-status{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  margin-top:20px;
}


/*
  状态颜色：
  完全使用当前网站的金色/米黄色。
*/
.csn-state{
  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:0;

  background:transparent !important;

  color:
    var(--csn-heading);

  font-size:18px;

  font-weight:800;

  line-height:1;
}


.csn-state[data-state="wait"]{
  color:
    var(--csn-card-text);

  opacity:.62;
}


.csn-state[data-state="bad"]{
  color:
    var(--csn-card-text);

  opacity:.76;
}


.csn-state-label{
  line-height:24px;
}


/*
  圆形笑脸
*/
.csn-status-face{
  position:relative;

  display:inline-block;

  width:24px;

  height:24px;

  flex:
    0 0 24px;

  border:
    2px solid currentColor;

  border-radius:50%;
}


/* 两只眼睛 */
.csn-status-face::before{
  content:"";

  position:absolute;

  left:5px;

  top:6px;

  width:3px;

  height:3px;

  border-radius:50%;

  background:currentColor;

  box-shadow:
    7px 0 0 currentColor;
}


/* 笑嘴 */
.csn-status-face::after{
  content:"";

  position:absolute;

  left:5px;

  bottom:4px;

  width:10px;

  height:5px;

  border-bottom:
    2px solid currentColor;

  border-radius:
    0 0 10px 10px;
}


/*
  不可用时嘴巴反向
*/
.csn-state[data-state="bad"]
.csn-status-face::after{
  bottom:3px;

  border-bottom:0;

  border-top:
    2px solid currentColor;

  border-radius:
    10px 10px 0 0;
}


.csn-latency{
  flex:0 0 auto;

  color:
    var(--csn-card-text);

  font-size:18px;

  font-weight:800;

  letter-spacing:1px;

  opacity:.80;

  white-space:nowrap;
}


/*
  底部线路状态
*/
.csn-bars{
  height:38px;

  display:flex;

  align-items:flex-end;

  gap:7px;

  margin-top:14px;

  overflow:hidden;
}


.csn-bar{
  display:block;

  flex:0 0 auto;

  background:
    var(--csn-heading);
}


/*
  第一根 = 当前检测
*/
.csn-bar-live{
  width:10px !important;

  height:32px !important;

  border-radius:
    5px 5px 3px 3px;

  opacity:1 !important;
}


/*
  失败状态仍使用网站颜色，
  只是降低透明度。
*/
.csn-bar-fail{
  background:
    var(--csn-card-text);

  opacity:.42 !important;
}


/*
  历史检测 = 小圆柱/圆点
*/
.csn-bar-history{
  width:9px !important;

  min-height:7px;

  max-height:14px;

  border-radius:999px;

  background:
    var(--csn-heading);
}


/*
  不再显示 TG / WA / G / AI
*/
.csn-service-icon{
  display:none !important;
}


/*
  平板 + H5 = 2 × 4
*/
@media(max-width:1100px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:10px !important;
  }
}


@media(max-width:760px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:9px !important;
  }

  .csn-probe{
    min-height:140px;

    padding:13px;
  }

  .csn-service-name{
    font-size:15px;
  }

  .csn-probe-status{
    margin-top:16px;
  }

  .csn-state{
    gap:7px;

    font-size:15px;
  }

  .csn-status-face{
    width:21px;

    height:21px;

    flex-basis:21px;
  }

  .csn-status-face::before{
    left:4px;

    top:5px;

    box-shadow:
      6px 0 0 currentColor;
  }

  .csn-status-face::after{
    left:4px;

    width:9px;
  }

  .csn-latency{
    font-size:14px;
  }

  .csn-bars{
    height:32px;

    gap:5px;

    margin-top:12px;
  }

  .csn-bar-live{
    width:8px !important;

    height:28px !important;
  }

  .csn-bar-history{
    width:7px !important;
  }
}


/*
  小屏手机仍然 2 列
*/
@media(max-width:480px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:8px !important;
  }

  .csn-probe{
    min-height:132px;

    padding:11px;
  }

  .csn-service-name{
    font-size:14px;
  }

  .csn-mini-refresh{
    font-size:15px;
  }

  .csn-probe-status{
    margin-top:14px;

    gap:5px;
  }

  .csn-state{
    font-size:14px;
  }

  .csn-status-face{
    width:20px;

    height:20px;

    flex-basis:20px;
  }

  .csn-latency{
    font-size:12px;

    letter-spacing:0;
  }

  .csn-bars{
    gap:4px;
  }

  .csn-bar-live{
    width:7px !important;
  }

  .csn-bar-history{
    width:6px !important;
  }
}


@media(max-width:360px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }

  .csn-probe{
    padding:9px;

    min-height:128px;
  }

  .csn-service-name{
    font-size:13px;
  }

  .csn-state{
    font-size:12px;
  }

  .csn-latency{
    font-size:11px;
  }
}


/* NETWORK FINAL STATUS UI END */

/* NETWORK REFRESH ANIMATION START */


/*
  单项刷新箭头旋转
*/
.csn-mini-refresh.csn-refreshing{
  animation:
    csn-spin .62s
    linear infinite;

  opacity:1;
}


/*
  全部刷新：
  文字本身不旋转，
  左边增加一个旋转箭头。
*/
.csn-button.csn-refreshing{
  position:relative;
}

.csn-button.csn-refreshing::before{
  content:"↻";

  display:inline-block;

  margin-right:6px;

  animation:
    csn-spin .62s
    linear infinite;
}


/*
  正在检测时整个卡片轻微呼吸。
  颜色全部取网站当前主题变量。
*/
.csn-probe.csn-probe-loading{
  border-color:
    var(--csn-heading);

  animation:
    csn-card-breathe
    1.1s
    ease-in-out
    infinite;
}


/*
  检测中的笑脸呼吸
*/
.csn-probe-loading
.csn-status-face{
  animation:
    csn-face-pulse
    .82s
    ease-in-out
    infinite;
}


/*
  检测中文字闪动
*/
.csn-probe-loading
.csn-state-label{
  animation:
    csn-text-pulse
    .9s
    ease-in-out
    infinite;
}


/*
  当前实时柱呼吸
*/
.csn-loading-live{
  animation:
    csn-live-pulse
    .75s
    ease-in-out
    infinite;
}


/*
  8 个历史点依次跳动，
  形成从左到右的扫描感。
*/
.csn-loading-dot{
  height:8px !important;

  opacity:.28;

  animation:
    csn-dot-scan
    1.05s
    ease-in-out
    infinite;

  animation-delay:
    calc(
      var(--csn-i)
      * 85ms
    );
}


/*
  检测完成时状态区域轻微淡入
*/
.csn-probe.csn-probe-result
.csn-probe-status{
  animation:
    csn-result-in
    .48s
    ease-out;
}


.csn-probe.csn-probe-result
.csn-bars{
  animation:
    csn-result-in
    .58s
    ease-out;
}


/*
  旋转
*/
@keyframes csn-spin{
  from{
    transform:
      rotate(0deg);
  }

  to{
    transform:
      rotate(360deg);
  }
}


/*
  卡片呼吸
*/
@keyframes csn-card-breathe{
  0%,
  100%{
    box-shadow:
      0 0 0
      rgba(0,0,0,0);
  }

  50%{
    box-shadow:
      0 0 16px
      color-mix(
        in srgb,
        var(--csn-heading) 25%,
        transparent
      );
  }
}


/*
  笑脸呼吸
*/
@keyframes csn-face-pulse{
  0%,
  100%{
    transform:
      scale(1);

    opacity:.58;
  }

  50%{
    transform:
      scale(1.10);

    opacity:1;
  }
}


/*
  状态文字呼吸
*/
@keyframes csn-text-pulse{
  0%,
  100%{
    opacity:.48;
  }

  50%{
    opacity:1;
  }
}


/*
  第一根状态柱
*/
@keyframes csn-live-pulse{
  0%,
  100%{
    transform:
      scaleY(.45);

    transform-origin:
      bottom;

    opacity:.52;
  }

  50%{
    transform:
      scaleY(1);

    transform-origin:
      bottom;

    opacity:1;
  }
}


/*
  小圆点扫描
*/
@keyframes csn-dot-scan{
  0%,
  100%{
    transform:
      translateY(0)
      scale(.82);

    opacity:.26;
  }

  45%{
    transform:
      translateY(-7px)
      scale(1.12);

    opacity:1;
  }
}


/*
  新结果出现
*/
@keyframes csn-result-in{
  from{
    opacity:.35;

    transform:
      translateY(4px);
  }

  to{
    opacity:1;

    transform:
      translateY(0);
  }
}


/*
  用户系统关闭动画时尊重系统设置
*/
@media(
  prefers-reduced-motion:
  reduce
){

  .csn-mini-refresh.csn-refreshing,
  .csn-button.csn-refreshing::before,
  .csn-probe.csn-probe-loading,
  .csn-probe-loading .csn-status-face,
  .csn-probe-loading .csn-state-label,
  .csn-loading-live,
  .csn-loading-dot,
  .csn-probe.csn-probe-result
    .csn-probe-status,
  .csn-probe.csn-probe-result
    .csn-bars{
    animation:none !important;
  }
}


/* NETWORK REFRESH ANIMATION END */

/* NETWORK REAL LATENCY TREND START */


/*
  删除旧版状态前面多余的小圆点
*/
.csn-state::before{
  content:none !important;
  display:none !important;
}


/*
  整体更接近连通性检测工具的紧凑比例，
  但颜色继续使用长顺资讯网当前主题。
*/
.csn-probe{
  min-height:142px !important;

  padding:
    15px 16px
    13px !important;
}


.csn-probe-top{
  align-items:center !important;
}


.csn-service-name{
  font-size:16px !important;

  line-height:1.2 !important;

  font-weight:800 !important;
}


.csn-mini-refresh{
  width:28px !important;

  height:28px !important;

  padding:0 !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  font-size:16px !important;

  opacity:.72 !important;
}


.csn-mini-refresh:hover{
  opacity:1 !important;
}


.csn-probe-status{
  margin-top:17px !important;

  align-items:center !important;
}


.csn-state{
  gap:7px !important;

  font-size:16px !important;

  font-weight:750 !important;
}


.csn-status-face{
  width:22px !important;

  height:22px !important;

  flex:
    0 0 22px !important;
}


.csn-latency{
  font-size:16px !important;

  font-weight:700 !important;

  letter-spacing:.3px !important;

  opacity:.83 !important;
}


/*
  可用 = 网站主金色
*/
.csn-state[data-state="good"]{
  color:
    var(--csn-heading) !important;
}


/*
  检测中 = 较弱主文字
*/
.csn-state[data-state="wait"]{
  color:
    var(--csn-card-text) !important;

  opacity:.66 !important;
}


/*
  不可用 = 警示色
*/
.csn-state[data-state="bad"]{
  color:
    var(
      --csn-danger,
      #ff7373
    ) !important;

  opacity:1 !important;
}


/*
  真实延迟走势图
*/
.csn-bars{
  display:flex !important;

  align-items:flex-end !important;

  justify-content:flex-start !important;

  height:34px !important;

  gap:5px !important;

  margin-top:11px !important;

  overflow:visible !important;
}


.csn-trend-bar{
  display:block;

  width:6px;

  min-height:5px;

  flex:
    0 0 6px;

  border-radius:
    3px 3px
    2px 2px;

  transform-origin:bottom;
}


/*
  历史真实数据
*/
.csn-trend-real{
  background:
    var(--csn-heading);

  opacity:.72;

  transition:
    height .28s ease,
    opacity .28s ease,
    transform .28s ease;
}


/*
  最新一次真实检测
*/
.csn-trend-latest{
  opacity:1;

  animation:
    csn-trend-enter
    .45s
    ease-out;
}


/*
  尚未积累到10次真实数据的位置
*/
.csn-trend-empty{
  height:5px !important;

  background:
    var(--csn-card-text);

  opacity:.13;
}


/*
  本次失败
*/
.csn-trend-fail{
  height:5px !important;

  background:
    var(
      --csn-danger,
      #ff7373
    );

  opacity:.78;
}


/*
  刷新过程中的扫描柱
*/
.csn-trend-loading{
  background:
    var(--csn-heading);

  opacity:.24;

  animation:
    csn-trend-scan
    1.02s
    ease-in-out
    infinite;

  animation-delay:
    calc(
      var(--csn-i)
      * 70ms
    );
}


/*
  右上角刷新旋转
*/
.csn-mini-refresh.csn-refreshing{
  opacity:1 !important;

  animation:
    csn-trend-spin
    .58s
    linear
    infinite;
}


/*
  检测中笑脸轻微呼吸
*/
.csn-probe-loading
.csn-status-face{
  animation:
    csn-trend-face
    .8s
    ease-in-out
    infinite;
}


/*
  检测中文字呼吸
*/
.csn-probe-loading
.csn-state-label{
  animation:
    csn-trend-text
    .82s
    ease-in-out
    infinite;
}


/*
  检测结果出现
*/
.csn-probe-result
.csn-probe-status{
  animation:
    csn-trend-result
    .38s
    ease-out;
}


.csn-probe-result
.csn-bars{
  animation:
    csn-trend-result
    .46s
    ease-out;
}


@keyframes csn-trend-spin{
  from{
    transform:
      rotate(0deg);
  }

  to{
    transform:
      rotate(360deg);
  }
}


@keyframes csn-trend-scan{
  0%,
  100%{
    transform:
      scaleY(.35);

    opacity:.22;
  }

  48%{
    transform:
      scaleY(1);

    opacity:1;
  }
}


@keyframes csn-trend-face{
  0%,
  100%{
    transform:
      scale(1);

    opacity:.58;
  }

  50%{
    transform:
      scale(1.08);

    opacity:1;
  }
}


@keyframes csn-trend-text{
  0%,
  100%{
    opacity:.48;
  }

  50%{
    opacity:1;
  }
}


@keyframes csn-trend-enter{
  from{
    transform:
      scaleY(.15);

    opacity:.2;
  }

  to{
    transform:
      scaleY(1);

    opacity:1;
  }
}


@keyframes csn-trend-result{
  from{
    opacity:.45;

    transform:
      translateY(3px);
  }

  to{
    opacity:1;

    transform:
      translateY(0);
  }
}


/*
  PC 4列
*/
.csn-probe-grid{
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;
}


/*
  H5 2列
*/
@media(max-width:1100px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }
}


@media(max-width:480px){

  .csn-probe-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:8px !important;
  }

  .csn-probe{
    min-height:125px !important;

    padding:
      11px 10px
      10px !important;
  }

  .csn-service-name{
    font-size:14px !important;
  }

  .csn-mini-refresh{
    width:23px !important;

    height:23px !important;

    font-size:14px !important;
  }

  .csn-probe-status{
    margin-top:13px !important;
  }

  .csn-state{
    gap:5px !important;

    font-size:13px !important;
  }

  .csn-status-face{
    width:19px !important;

    height:19px !important;

    flex-basis:19px !important;
  }

  .csn-latency{
    font-size:12px !important;
  }

  .csn-bars{
    height:29px !important;

    gap:4px !important;

    margin-top:9px !important;
  }

  .csn-trend-bar{
    width:5px;

    flex-basis:5px;
  }
}


@media(
  prefers-reduced-motion:
  reduce
){

  .csn-trend-loading,
  .csn-trend-latest,
  .csn-mini-refresh.csn-refreshing,
  .csn-probe-loading
    .csn-status-face,
  .csn-probe-loading
    .csn-state-label,
  .csn-probe-result
    .csn-probe-status,
  .csn-probe-result
    .csn-bars{
    animation:none !important;
  }
}


/* NETWORK REAL LATENCY TREND END */