@charset "utf-8";

.m-more-page .m-app {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}

.m-more-banner {
  line-height: 0;
  background: #eee;
}

.m-more-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.m-more-menu {
  background: #fff;
}

.m-more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #222;
  font-size: 15px;
  background: #fff;
}

.m-more-item.is-active {
  background: #fafafa;
}

.m-more-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.m-more-icon--api {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 2h10v2H7V2zm-2 4h14v2H5V6zm2 4h10v10H7V10zm2 2v6h6v-6H9z'/%3E%3C/svg%3E");
}

.m-more-icon--google {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M44 24.5c0-1.6-.1-3.2-.4-4.7H24v8.9h11.3c-.5 2.7-2 5-4.2 6.5v5.4h6.8c4-3.7 6.3-9.1 6.3-15.1z'/%3E%3Cpath fill='%2334A853' d='M24 44c5.7 0 10.5-1.9 14-5.1l-6.8-5.4c-1.9 1.3-4.3 2-7.2 2-5.5 0-10.2-3.7-11.9-8.7H5.1v5.6C8.6 39.9 15.8 44 24 44z'/%3E%3Cpath fill='%23FBBC05' d='M12.1 27.8c-.4-1.3-.7-2.7-.7-4.1s.2-2.8.7-4.1V14H5.1C3.7 16.9 3 20.3 3 24s.7 7.1 2.1 10l7-5.2z'/%3E%3Cpath fill='%23EA4335' d='M24 11.5c3.1 0 5.9 1.1 8.1 3.2l6-6C34.5 5.5 29.7 3.5 24 3.5 15.8 3.5 8.6 7.6 5.1 14l7 5.2c1.7-5 6.4-8.7 11.9-8.7z'/%3E%3C/svg%3E");
}

.m-more-icon--contact {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a4594'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 3c1.7 0 3.2.6 4.4 1.6L8.6 14.4C7.6 13.2 7 11.7 7 10c0-2.8 2.2-5 5-5zm0 14c-1.7 0-3.2-.6-4.4-1.6l7.8-7.8c1 1.2 1.6 2.7 1.6 4.4 0 2.8-2.2 5-5 5z'/%3E%3C/svg%3E");
}

.m-more-icon--picker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M4 6h16v2H4V6zm0 5h10v2H4v-2zm0 5h16v2H4v-2zM18 10l3 3-3 3v-2h-4v-2h4v-2z'/%3E%3C/svg%3E");
}

.m-more-text {
  flex: 1;
}

.m-more-arrow {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  transform: rotate(-45deg);
  margin-right: 4px;
}

.m-more-panel {
  padding: 16px 14px 20px;
  background: #fafafa;
  border-top: 1px solid #eee;
}

.m-more-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--m-blue);
  margin-bottom: 12px;
}

.m-more-api-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-more-api-list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}

.m-more-api-list li:last-child {
  border-bottom: none;
}

.m-more-api-list code {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  color: #555;
  word-break: break-all;
}

.m-more-contact {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
}

.m-more-email {
  margin-top: 8px;
  color: var(--m-blue);
  font-weight: 600;
}

.m-more-picker-tip {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
}

.m-more-sx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.m-more-sx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 6px;
  background: var(--m-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.m-more-sx-btn:active {
  opacity: 0.85;
}