.line-speed-value{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.line-speed-loading{
  color:#9b9195;
}

.line-speed-fast{
  color:#55e96b;
  background:rgba(24,100,39,.30);
  border:1px solid rgba(55,190,79,.48);
}

.line-speed-normal{
  color:#efd05f;
  background:rgba(110,86,18,.25);
  border:1px solid rgba(202,163,42,.45);
}

.line-speed-slow{
  color:#ff9b42;
  background:rgba(121,57,17,.26);
  border:1px solid rgba(224,115,34,.45);
}

.line-speed-bad{
  color:#ff6b72;
  background:rgba(120,28,34,.27);
  border:1px solid rgba(211,63,72,.45);
}

.speed-bolt{
  font-size:17px;
  line-height:1;
}

@media(max-width:760px){

  body.h5-line-modal-open
  #h5BottomNav,
  body.h5-line-modal-open
  .h5-bottom-nav{
    display:block !important;
  }

  body.h5-line-modal-open{
    padding-bottom:
      calc(
        66px +
        env(safe-area-inset-bottom)
      ) !important;
  }


  .h5-final-line-modal{
    bottom:
      calc(
        66px +
        env(safe-area-inset-bottom)
      ) !important;

    top:auto !important;

    height:auto !important;

    min-height:0 !important;

    max-height:
      min(
        74dvh,
        calc(
          100dvh -
          66px -
          env(safe-area-inset-bottom) -
          24px
        )
      ) !important;

    overflow:hidden !important;

    border:
      1px solid
      rgba(216,174,54,.78) !important;

    border-bottom:0 !important;

    border-radius:
      22px 22px 0 0 !important;

    background:
      linear-gradient(
        155deg,
        #1a1016,
        #0e0a0d 70%
      ) !important;

    box-shadow:
      0 -18px 48px
      rgba(0,0,0,.50) !important;
  }


  .h5-final-handle{
    width:46px;
    height:5px;

    margin:
      10px auto 7px;

    border-radius:99px;

    background:
      rgba(193,127,127,.55);
  }


  #groupTabs{
    overflow-x:auto !important;
    overflow-y:hidden !important;

    display:flex !important;

    scrollbar-width:none;
  }

  #groupTabs::-webkit-scrollbar{
    display:none;
  }


  #groupTabs .group-tab{
    flex:0 0 auto !important;

    min-height:52px !important;

    padding:
      0 18px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    border-color:
      rgba(188,120,31,.60) !important;

    color:#f6d376 !important;

    font-weight:750 !important;
  }


  #groupTabs .group-tab.active{
    background:
      linear-gradient(
        135deg,
        rgba(103,27,19,.92),
        rgba(51,15,12,.94)
      ) !important;

    box-shadow:
      inset 0 -3px 0
      #e3b73b !important;
  }


  .h5-tab-crown{
    color:#e6ba3f;
    font-size:16px;
  }


  #lineList{
    box-sizing:border-box;

    padding:
      10px 14px 16px !important;

    max-height:
      calc(
        74dvh - 180px
      ) !important;

    overflow-y:auto !important;

    overflow-x:hidden !important;

    -webkit-overflow-scrolling:
      touch;

    overscroll-behavior:
      contain;
  }


  #lineList .line-status{
    display:none !important;
  }


  #lineList .line-row{
    position:relative !important;

    width:100% !important;

    min-height:92px !important;

    margin:
      0 0 10px !important;

    padding:
      14px !important;

    box-sizing:border-box !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      84px
      88px !important;

    gap:9px !important;

    align-items:center !important;

    border:
      1px solid
      rgba(137,78,49,.40) !important;

    border-radius:
      15px !important;

    background:
      linear-gradient(
        145deg,
        rgba(54,27,23,.90),
        rgba(25,16,18,.97)
      ) !important;

    overflow:hidden !important;
  }


  #lineList .line-main{
    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:6px;
  }


  #lineList .line-name{
    margin:0 !important;
    padding:0 !important;

    color:#fff !important;

    font-size:16px !important;

    font-weight:750 !important;

    line-height:1.25 !important;

    white-space:nowrap !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
  }


  #lineList .line-meta{
    color:#9f9197;

    font-size:11px;

    line-height:1.2;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }


  #lineList .line-speed-value{
    position:static !important;

    transform:none !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:84px !important;

    min-width:84px !important;

    height:38px !important;

    margin:0 !important;

    padding:
      0 8px !important;

    border-radius:
      999px !important;

    font-size:
      11px !important;

    font-weight:
      800 !important;
  }


  #lineList .enter-btn{
    position:static !important;

    transform:none !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    width:88px !important;

    min-width:88px !important;

    max-width:88px !important;

    height:46px !important;

    margin:0 !important;

    padding:
      0 9px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:4px !important;

    border:
      1.5px solid
      #ddb036 !important;

    border-radius:
      12px !important;

    background:
      linear-gradient(
        135deg,
        #562906,
        #2b1609
      ) !important;

    color:#ffdc7a !important;

    font-size:15px !important;

    font-weight:800 !important;
  }


  #lineList .enter-arrow{
    font-size:22px;
    line-height:1;
    margin-top:-2px;
  }


  #lineList .line-row:last-child{
    margin-bottom:0 !important;
  }


  @media(max-width:390px){

    #lineList{
      padding:
        9px 10px 14px !important;
    }

    #lineList .line-row{
      grid-template-columns:
        minmax(0,1fr)
        72px
        76px !important;

      gap:6px !important;

      padding:
        12px 10px !important;
    }

    #lineList .line-speed-value{
      width:72px !important;
      min-width:72px !important;
      padding:0 5px !important;
      font-size:10px !important;
    }

    #lineList .enter-btn{
      width:76px !important;
      min-width:76px !important;
      max-width:76px !important;
      font-size:14px !important;
    }

  }

}

@media(max-width:760px){

  .h5-remove-brand-icon{
    display:none !important;
  }

  .h5-modal-header-no-icon{
    padding-left:16px !important;
  }

  .h5-modal-header-no-icon #modalTitle,
  .h5-modal-header-no-icon #modalCount{
    margin-left:0 !important;
    left:auto !important;
  }

}