/* Language page refresh: compact, calm and touch-friendly on mobile and desktop. */
html, body {
  background: #f4f7fb;
}

.container {
  min-height: 100vh !important;
  box-sizing: border-box !important;
  padding: 0 0 32px !important;
  background: linear-gradient(180deg, #edf5ff 0, #f7f9fc 240px) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Arial, sans-serif !important;
}

.nav-header {
  height: 64px !important;
  padding: 0 20px !important;
  background: linear-gradient(135deg, #075dcc 0%, #1687f5 100%) !important;
  box-shadow: 0 8px 24px rgba(18, 98, 194, .18) !important;
}

.nav-header .left-arrow {
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  margin-right: 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .14) !important;
}

.nav-header .nav-title {
  font-size: 21px !important;
  letter-spacing: .01em !important;
}

.lang-list {
  width: calc(100% - 32px) !important;
  max-width: 640px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(21, 92, 170, .08) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 14px 40px rgba(37, 82, 130, .10) !important;
}

.lang-item {
  position: relative !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 20px !important;
  color: #1d2d42 !important;
  cursor: pointer !important;
  transition: background-color .18s ease, transform .18s ease !important;
}

.lang-item:not(:last-child) {
  border-bottom: 1px solid #edf1f6 !important;
}

.lang-item:active {
  background: #f0f7ff !important;
  transform: scale(.99) !important;
}

.lang-item .left-info {
  gap: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #24364d !important;
}

.lang-item .left-info .flag-icon {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 28px !important;
  margin-right: 0 !important;
  border: 1px solid #e4eaf2 !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  box-shadow: 0 3px 8px rgba(31, 61, 94, .10) !important;
}

.lang-item .u-icon {
  color: #9aa9ba !important;
  transition: transform .18s ease, color .18s ease !important;
}

.lang-item:active .u-icon {
  color: #1687f5 !important;
  transform: translateX(3px) !important;
}

@media (min-width: 700px) {
  .lang-list {
    margin-top: 32px !important;
  }

  .lang-item:hover {
    background: #f7fbff !important;
  }
}