* {
  box-sizing: border-box;
}

body {
  background: #eef2f6 !important;
  color: #333;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

.top-banner,
.notice {
  height: 66px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #4266b5 !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.header-ads,
.top {
  background: #fff !important;
  padding: 0 !important;
}

.header-ads .container,
.top-inner {
  width: min(1238px, 100%) !important;
  min-height: 102px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 180px repeat(4, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
}

.header-ads .container.no-top-ads,
.top-inner.no-top-ads {
  min-height: 62px !important;
  height: 62px !important;
  grid-template-columns: 180px minmax(0, 1fr) !important;
}

.logo,
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 180px !important;
  height: 46px !important;
  color: #233b63 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.brand-mark,
.brand .brand-mark,
.logo .brand-mark {
  width: 46px !important;
  height: 46px !important;
  border-radius: 8px !important;
  background: #4266b5 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.logo-text,
.brand > span:last-child,
.brand .logo-text,
.logo .logo-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.logo-name,
.brand strong,
.brand .logo-name,
.logo .logo-name {
  display: block !important;
  color: #233b63 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.logo-domain,
.brand .logo-domain,
.logo .logo-domain {
  display: block !important;
  color: #687589 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.header-ad-banners {
  grid-column: 2 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.header-ad-banner,
.ad {
  position: relative !important;
  height: 80px !important;
  border: 1px solid #cfd7e4 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(66, 102, 181, .14), rgba(42, 166, 108, .13)),
    repeating-linear-gradient(135deg, #fff 0 12px, #f4f7fb 12px 24px) !important;
  color: #8b95a5 !important;
  display: grid !important;
  place-items: center !important;
}

.header-ad-banner img,
.banner-ad img,
.sidebar-ad img,
.ad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.navbar,
.nav {
  height: 50px !important;
  background: #28364b !important;
  box-shadow: none !important;
}

.navbar .container,
.nav-inner,
.nav-list {
  width: min(1238px, 100%) !important;
  height: 50px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.nav-items {
  height: 50px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-item {
  position: relative !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  list-style: none !important;
}

.nav-link,
.nav a,
.nav-action,
.settings,
.settings-btn {
  min-width: 90px !important;
  height: 50px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: #d9e2f0 !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.nav-items > .nav-item > .nav-link {
  width: 90px !important;
}

.nav-items > .nav-item:nth-child(1) > .nav-link {
  width: 72px !important;
}

.nav-items > .nav-item:nth-child(3) > .nav-link,
.nav-items > .nav-item:nth-child(4) > .nav-link {
  width: 108px !important;
}

.nav-link > span:first-child:not(.nav-badge) {
  display: none !important;
}

.nav-link:hover,
.nav-link.active,
.nav a:hover,
.nav a.active {
  background: #4266b5 !important;
  color: #fff !important;
}

.nav-link[href*="habit_setting"],
.settings,
.settings-btn,
.nav-action {
  background: #f2b33d !important;
  color: #3b2a06 !important;
  font-weight: 700 !important;
}

.nav-submenu,
.submenu {
  position: absolute !important;
  top: 50px !important;
  left: 0 !important;
  z-index: 20 !important;
  display: none !important;
  min-width: 132px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: #fff !important;
  border: 1px solid #dfe5ef !important;
  box-shadow: 0 5px 14px rgba(20, 31, 50, 0.16) !important;
}

.nav-item:hover > .nav-submenu,
.nav-item:focus-within > .nav-submenu,
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu {
  display: block !important;
}

.nav-submenu a,
.submenu a {
  display: block !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 9px 14px !important;
  color: #333 !important;
  background: #fff !important;
  text-align: left !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

.nav-submenu a:hover,
.submenu a:hover {
  background: #f2f5fa !important;
  color: #4266b5 !important;
}

.banner-ad,
.sidebar-ad {
  position: relative;
  overflow: hidden;
}

.main-container,
.page-layout,
.tool-page,
.wrap,
.main > .container {
  width: min(1238px, 100%) !important;
  margin: 16px auto 28px !important;
  padding: 0 !important;
}

.main {
  padding: 0 !important;
}

.content,
.content-area {
  width: 100% !important;
  max-width: 1238px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.breadcrumb,
.crumb,
.tool-breadcrumb,
.path {
  width: 100% !important;
  min-height: 43px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  color: #5f6b7d !important;
  font-size: 13px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.card,
.filters,
.input-card,
.content-card,
.tool-panel,
.filter-card {
  border-radius: 4px !important;
}

.probe-card,
.input-area,
.input-card {
  min-height: 160px !important;
  padding: 28px 22px 18px !important;
  margin: 0 0 16px !important;
  background: #fff !important;
  border: 1px solid #d8dee8 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(35, 49, 71, 0.07) !important;
}

.probe-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
}

.probe-actions {
  display: flex !important;
  gap: 8px !important;
}

.probe-input,
.probe-row > input[type="text"],
.probe-row > input:not([type]),
.probe-row > select {
  width: 600px !important;
  height: 46px !important;
  padding: 0 13px !important;
  border: 1px solid #cfd7e4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
}

.probe-input:focus,
.probe-row > input[type="text"]:focus,
.probe-row > input:not([type]):focus,
.dns-input:focus,
.filter-row input[type="text"]:focus {
  border-color: #4680ff !important;
  box-shadow: 0 0 0 3px rgba(70, 128, 255, 0.12) !important;
}

.probe-row button,
.probe-btn,
.btn-primary,
.btn-success,
.btn-warning,
button.primary,
button.success,
button.warning {
  width: 115px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 44px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.probe-row button:hover,
.probe-row button.is-hover,
.probe-btn:hover,
.probe-btn.is-hover,
.btn-primary:hover,
.btn-primary.is-hover,
.btn-success:hover,
.btn-success.is-hover,
.btn-warning:hover,
.btn-warning.is-hover,
button.primary:hover,
button.primary.is-hover,
button.success:hover,
button.success.is-hover,
button.warning:hover,
button.warning.is-hover {
  filter: brightness(.96) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(35, 49, 71, .14) !important;
}

.probe-row button:active,
.probe-row button.is-pressed,
.probe-btn:active,
.probe-btn.is-pressed,
.btn-primary:active,
.btn-primary.is-pressed,
.btn-success:active,
.btn-success.is-pressed,
.btn-warning:active,
.btn-warning.is-pressed,
button.primary:active,
button.primary.is-pressed,
button.success:active,
button.success.is-pressed,
button.warning:active,
button.warning.is-pressed {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

.probe-row button:disabled,
.probe-btn:disabled,
.btn-primary:disabled,
.btn-success:disabled,
.btn-warning:disabled,
button.primary:disabled,
button.success:disabled,
button.warning:disabled {
  cursor: wait !important;
  opacity: .72 !important;
  box-shadow: none !important;
}

.probe-btn.primary,
.btn-primary,
button.primary {
  background: #4680ff !important;
}

.probe-btn.success,
.btn-success,
button.success {
  background: #5ac355 !important;
}

.probe-btn.warning,
.probe-row button.btn-warning,
.btn-warning,
button.warning {
  width: 126px !important;
  background: #ffba57 !important;
  color: #fff !important;
}

#advancedBtn,
.probe-row button.advanced-toggle,
.advanced-toggle {
  width: 126px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1px solid #4680ff !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: #4680ff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 42px !important;
}

.probe-row button.record-button,
.record-button {
  width: 115px !important;
  min-width: 115px !important;
  height: 43px !important;
  padding: 0 !important;
  border: 1px solid #4680ff !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: #4680ff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 41px !important;
}

#advancedBtn:hover,
#advancedBtn.active,
.probe-row button.advanced-toggle:hover,
.probe-row button.advanced-toggle.active,
.probe-row button.record-button:hover,
.probe-row button.record-button.active,
.record-button:hover,
.record-button.active,
.advanced-toggle:hover,
.advanced-toggle.active {
  background: #eef4ff !important;
  color: #4266b5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(35, 49, 71, .12) !important;
}

#domainTestBtn,
.probe-row button.slow-test,
.slow-test {
  width: 115px !important;
}

.filter-section.tight,
.filter-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
  color: #475569 !important;
}

.filter-section.tight label,
.filter-row label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 31px !important;
  cursor: pointer !important;
  color: #475569 !important;
}

.dns-input,
.filter-row input[type="text"],
#customDns,
#dnsServer {
  width: 200px !important;
  height: 31px !important;
  padding: 0 8px !important;
  border: 1px solid #cfd7e4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  font-size: 12px !important;
}

.dns-input:disabled,
.filter-row input[type="text"]:disabled,
#customDns:disabled,
#dnsServer:disabled {
  background: #e9ecef !important;
  color: #8b95a5 !important;
  cursor: not-allowed !important;
}

.target-meta,
.run-feedback {
  min-height: 20px !important;
  margin-top: 12px !important;
  color: #4266b5 !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.input-card.batch-input-card .batch-options {
  position: absolute !important;
  top: 101px !important;
  right: 20px !important;
  width: 382px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.input-card.batch-input-card .batch-options button {
  height: 28px !important;
  border: 1px solid #cfd7e4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #4266b5 !important;
  padding: 0 8px !important;
}

.input-card.batch-input-card .run-feedback {
  display: none !important;
}

.input-card.batch-input-card,
.input-card.batch-port-card,
.input-card.batch-http-card {
  height: 217px !important;
  min-height: 217px !important;
  padding-bottom: 14px !important;
}

.input-card.batch-input-card .probe-row,
.input-card.batch-port-card .probe-row,
.input-card.batch-http-card .probe-row {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.input-card.batch-input-card .probe-row textarea,
.input-card.batch-port-card .probe-row textarea,
.input-card.batch-http-card .probe-row textarea {
  width: 795px !important;
  height: 169px !important;
}

.input-card.batch-port-card .batch-options,
.input-card.batch-http-card .batch-options {
  width: 382px !important;
}

.input-card.batch-port-card .run-feedback,
.input-card.batch-http-card .run-feedback {
  width: 382px !important;
}

.input-card.batch-port-card .batch-port-field,
.input-card.batch-http-card .batch-method-label {
  margin-left: 0 !important;
}

.sidebar-left:empty,
.sidebar-right:empty,
.sidebar-left:has([hidden]),
.sidebar-right:has([hidden]) {
  display: none !important;
}

.netprobe-footer {
  margin-top: 28px !important;
  padding: 22px 16px 34px !important;
  background: #fff !important;
  color: #6f7888 !important;
  text-align: center !important;
  line-height: 2 !important;
  font-size: 13px !important;
  min-height: 108px !important;
  height: 108px !important;
}

[hidden],
[data-ad-slot][hidden],
.header-ad-banner[hidden],
.banner-ad[hidden],
.sidebar-ad[hidden],
.ad[hidden] {
  display: none !important;
}

[data-ad-slot][hidden].ad-visible,
.header-ad-banner[hidden].ad-visible,
.banner-ad[hidden].ad-visible,
.sidebar-ad[hidden].ad-visible,
.ad[hidden].ad-visible {
  display: grid !important;
}

@media (max-width: 900px) {
  .header-ads .container,
  .top-inner {
    width: 100% !important;
    height: auto !important;
    padding: 12px !important;
    grid-template-columns: 1fr !important;
  }

  .header-ad-banners {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
  }

  .navbar,
  .nav,
  .navbar .container,
  .nav-inner,
  .nav-list,
  .nav-items {
    height: auto !important;
    flex-wrap: wrap !important;
  }
}