/* 页面主样式，原内容来自index.html <style> 标签 */
body {
  background: #f7f8fa;
  margin: 0;
  font-family: "微软雅黑", Arial, sans-serif;
  color: #222;
}
.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  background: linear-gradient(90deg, #fafdff 60%, #e3f0ff 100%);
  box-shadow: 0 2px 12px rgba(33,150,243,0.08);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-fixed.hide {
  transform: translateY(-100%);
  box-shadow: none;
}
.header-fixed.show {
  transform: translateY(0);
}


#siteLogo {
  width: 160px;
  height: 50px;
  border-radius: 12px;
  object-fit: contain;
  background: none;
  box-shadow: none;
}

@media (min-width: 600px) {

}
@media (max-width: 400px) {
  .site-title { font-size: 14px; }
}
.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0;
}
.logo img {
  width: 150px;
  height: 60px;
  margin-bottom: 0;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}
.container {
  max-width: 760px;
  margin: 0 auto 32px auto;
  padding: 0 10px;
  padding-top: 70px; /* 预留头部空间 */
}
@media (max-width: 800px) {
  .container { max-width: 100vw; }
}
.section {
  margin-bottom: 32px;
}
.section-title {
  display: flex;
  align-items: center;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #222;
  letter-spacing: 1px;
  padding-left: 2px;
}
.section-title img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
}
.card-list {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(33,150,243,0.10);
  margin-bottom: 0;
  border: 1.5px solid #e3eaf2;
  overflow: hidden;
}
.site-item {
  display: flex;
  align-items: center;
  padding: 20px 20px 20px 20px;
  border-bottom: 1px solid #f3f4f8;
  position: relative;
  background: linear-gradient(90deg, #fafdff 60%, #e3f0ff 100%);
  transition: background 0.2s;
  animation: fadeInUp 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}
.site-item:last-child {
  border-bottom: none;
}
.site-item:hover {
  background: linear-gradient(90deg, #e3f0ff 60%, #fafdff 100%);
}
.site-logo {
  width: 64px;
  height: 64px;
  border-radius: 5px;
  background: #f3f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(33,150,243,0.08);
  flex-shrink: 0;
}
.site-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.site-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 64px;
}
.site-title {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.site-tag {
  font-size: 10px;
  border-radius: 8px 0 8px 0;
  padding: 2px 5px;
  color: #fff;
  font-weight: 500;
  background: #4caf50;
  vertical-align: middle;
  display: inline-block;
  box-shadow: 0 1px 4px rgba(33,150,243,0.10);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  margin: 0;
  /* 视觉突出 */
  font-style: italic;
  letter-spacing: 1px;
}
.site-tag.red { background: #ff5722; }
.site-tag.blue { background: #2196f3; }
.site-tag.green { background: #4caf50; }
.site-tag.orange { background: #ff9800; }
.site-tag.gray { background: #888; }
.site-desc {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.site-btn {
  padding: 8px 8px;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #2196f3 60%, #21cbf3 100%);
  transition: background 0.2s, box-shadow 0.2s;
  outline: none;
  box-shadow: 0 1px 4px rgba(33,150,243,0.10);
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-btn.blue { background: linear-gradient(90deg, #1976d2 60%, #2196f3 100%); }
.site-btn.red { background: linear-gradient(90deg, #f44336 60%, #ff5252 100%); }
.site-btn.green { background: linear-gradient(90deg, #43a047 60%, #4caf50 100%); }
.site-btn.orange { background: linear-gradient(90deg, #ff9800 60%, #ffb347 100%); }
.site-btn.gray { background: #888; }
.site-btn:hover { opacity: 0.92; box-shadow: 0 2px 8px rgba(33,150,243,0.18);}
@media (max-width: 800px) {
  .container { max-width: 100vw; }
  .site-btn { min-width: 0; font-size: 13px; }
  .site-logo { width: 48px; height: 48px; }
  .site-title { font-size: 13px; }
  .section-title { font-size: 16px; }
  .site-info { height: 48px; }
}
/* Modal 样式 */
.modal-mask {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.22);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-mask.active { display: flex; }
.modal-box {
  background: linear-gradient(135deg, #fafdff 60%, #e3f0ff 100%);
  border-radius: 18px;
  box-shadow: 0 12px 48px 0 rgba(33,150,243,0.18), 0 2px 8px rgba(33,150,243,0.10);
  max-width: 420px;
  width: 92vw;
  padding: 38px 28px 38px 28px;
  text-align: center;
  position: relative;
  animation: modalIn 0.22s cubic-bezier(.68,-0.55,.27,1.55);
  box-sizing: border-box;
  margin-left: 12px;
  margin-right: 12px;
}
@keyframes modalIn {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-close {
  position: absolute;
  right: 18px;
  top: 18px;
  font-size: 30px;
  color: #bbb;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.2s, transform 0.2s;
}
.modal-close:hover { color: #2196f3; transform: rotate(90deg) scale(1.2); }
.modal-logo {
  width: 70px;
  height: 70px;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 18px rgba(33,150,243,0.13);
  border: 2px solid #e3eaf2;
}
.modal-logo img {
  width: 90%;
  height: 90%;
  border-radius: 50%;
}
.modal-title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
  letter-spacing: 1px;
  line-height: 1.1;
}
.modal-desc {
  color: #6a7a8c;
  font-size: 12px;
  margin-bottom: 6px;
  font-weight: 400;
  letter-spacing: 0.5px;
}
.modal-site {
  color: #a0a0a0;
  font-size: 11px;
  margin-bottom: 10px;
  font-weight: 400;
}
.modal-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  align-items: stretch;
}
.modal-line-btn {
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 700;
  border-radius: 18px;
  padding: 7px 0;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(33,150,243,0.08);
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
  text-decoration: none;
}
.modal-line-btn span:first-child {
  color: #fff;
}
.modal-line-speed {
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  padding: 2px 10px;
  margin-left: 8px;
  min-width: 90px;
  max-width: 50px;
  background: #fff;
  color: #2196f3;
  border: 1.5px solid #e3eaf2;
  box-shadow: 0 1px 4px rgba(33,150,243,0.10);
  display: inline-block;
  text-align: center;
}
#modalSpeedTip {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: bold !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  background: #111;
  border-radius: 10px;
  padding: 6px 0 6px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  border: none;
  width: 100%;
  display: inline-block;
}
#modalSpeedTip .fast {
  color: #43d06b;
  font-weight: bold;
  margin: 0 8px;
}
#modalSpeedTip .slow {
  color: #ff5252;
  font-weight: bold;
  margin: 0 8px;
}
.modal-action-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
#openSaveModal, #getAltUrlBtn, #openAppDownloadModal {
  flex: 1 1 0;
  margin: 0 !important;
  min-width: 0;
  font-size: 13px;
  padding: 8px 0;
  border-radius: 12px;
}
/* 保存网址弹窗样式 */
.save-modal-mask {
  position: fixed;
  z-index: 10000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: none;
  align-items: center;
  justify-content: center;
}
.save-modal-mask.active { display: flex; }
.save-modal-box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(33,150,243,0.13);
  max-width: 380px;
  width: 92vw;
  padding: 24px 18px 18px 18px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  margin-left: 12px;
  margin-right: 12px;
}
.save-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #ff9800;
  margin-bottom: 8px;
  text-align: center;
}
.save-url-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.save-url-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
}
.save-copy-btn {
  margin-left: 10px;
  background: #b388ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.18s;
}
.save-copy-btn:hover {
  background: #ff9800;
}
.save-all-btn {
  width: 100%;
  background: linear-gradient(90deg, #ff9800 60%, #b388ff 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.18s;
}
.save-all-btn:hover {
  background: linear-gradient(90deg, #b388ff 60%, #ff9800 100%);
}
.save-tip {
  text-align: center;
  color: #43a047;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 1px;
}
@media (max-width: 600px) {
  .save-modal-box {
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
}
.loading-mask {
  position: fixed;
  z-index: 10000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}
.loading-mask.hide {
  opacity: 0;
  pointer-events: none;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #e3eaf2;
  border-top: 5px solid #2196f3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 18px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  font-size: 16px;
  color: #2196f3;
  font-weight: 600;
  letter-spacing: 2px;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.site-footer {
  width: 100%;
  background: #f7f8fa;
  color: #888;
  font-size: 13px;
  text-align: center;
  padding: 18px 0 12px 0;
  border-top: 1.5px solid #e3eaf2;
  margin-top: 32px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.site-footer a {
  color: #2196f3;
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer a:hover {
  color: #ff9800;
}
.footer-split {
  color: #ccc;
  margin: 0 6px;
}
.footer-row {
  width: 100%;
  text-align: center;
  margin: 0 auto 6px auto;
  font-size: 13px;
  color: #888;
}
.footer-xml-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  font-size: 12px;
  color: #888;
}
.footer-desc {
  color: #aaa;
  font-size: 12px;
  margin-top: 8px;
  margin-bottom: 0;
  line-height: 1.7;
}
.footer-copyright {
  color: #bbb;
  font-size: 11px;
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 1.6;
}
.footer-copyright a {
  color: #2196f3;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .site-footer {
    font-size: 12px;
    padding: 12px 0 8px 0;
    margin-top: 18px;
  }
  .footer-inner {
    gap: 6px;
  }
  .footer-row { font-size: 12px; }
  .footer-xml-row { font-size: 11px; gap: 4px; }
  .footer-desc, .footer-copyright { font-size: 10px; }
}
.float-btn-group {
  position: fixed;
  right: 22px;
  bottom: 32px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}
.float-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2196f3;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  box-shadow: 0 2px 12px rgba(33,150,243,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
  outline: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.float-btn-green { background: #43a047; }
.float-btn-blue { background: #2196f3; }
.float-btn-orange { background: #ff5722; }
.float-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px rgba(33,150,243,0.22);
  transform: translateY(-2px) scale(1.08);
}
.float-btn-icon {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 600px) {
  .float-btn-group {
    right: 10px;
    bottom: 14px;
    gap: 10px;
  }
  .float-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .float-btn-icon {
    width: 14px;
    height: 14px;
  }
}
.contact-modal-mask {
  position: fixed;
  z-index: 10000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: none;
  align-items: center;
  justify-content: center;
}
.contact-modal-mask.active { display: flex; }
.contact-modal-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(33,150,243,0.13);
  max-width: 340px;
  width: 92vw;
  padding: 18px 10px 10px 10px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  margin-left: 12px;
  margin-right: 12px;
}
.contact-modal-title {
  font-size: 16px;
  margin-bottom: 6px;
}
.contact-modal-close {
  position: absolute;
  right: 18px;
  top: 12px;
  font-size: 28px;
  color: #bbb;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.2s, transform 0.2s;
}
.contact-modal-close:hover { color: #2196f3; transform: rotate(90deg) scale(1.2); }
.contact-modal-list {
  gap: 10px;
  margin-bottom: 6px;
}
.contact-modal-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 12px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
}
.contact-modal-item:hover {
  background: #e3f0ff;
  box-shadow: 0 2px 8px rgba(33,150,243,0.10);
}
.contact-modal-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.contact-modal-label {
  font-weight: bold;
  color: #222;
  font-size: 12px;
  margin-bottom: 0;
}
.contact-modal-link {
  color: #2196f3;
  font-size: 12px;
  text-decoration: none;
  word-break: break-all;
}
.contact-modal-link:hover {
  color: #ff9800;
}
.contact-modal-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  border-radius: 50%;
  background: #eee;
  text-align: center;
  line-height: 32px;
  font-size: 20px;
}
.contact-modal-icon.email { background: #ff9800 url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2v.01L12 13 4 6.01V6h16z"/></svg>') center/60% no-repeat; }
.contact-modal-icon.telegram { background: #2196f3 url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.04 16.29l-.39 3.47c.56 0 .8-.24 1.09-.53l2.62-2.49 5.44 3.98c1 .55 1.72.26 1.97-.92l3.58-16.76c.32-1.48-.54-2.06-1.5-1.7L2.2 9.13c-1.45.56-1.43 1.36-.25 1.72l4.6 1.44 10.7-6.74c.5-.32.96-.14.58.18z"/></svg>') center/60% no-repeat; }
.contact-modal-icon.clock { background: #43a047 url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8v5l4.28 2.54a1 1 0 0 1-1 1.73l-4.28-2.54V8a1 1 0 0 1 2 0z"/></svg>') center/60% no-repeat; }
.contact-modal-btn {
  width: 100%;
  background: linear-gradient(90deg, #2196f3 60%, #43d06b 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.18s;
}
.contact-modal-btn:hover {
  background: linear-gradient(90deg, #43d06b 60%, #2196f3 100%);
}
@media (max-width: 600px) {
  .contact-modal-title { font-size: 14px; }
  .contact-modal-item { font-size: 11px; }
  .contact-modal-btn { font-size: 11px; }
}
.app-download-modal-mask {
  position: fixed;
  z-index: 10000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: none;
  align-items: center;
  justify-content: center;
}
.app-download-modal-mask.active { display: flex; }
.app-download-modal-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(33,150,243,0.13);
  max-width: 700px;
  width: 92vw;
  padding: 28px 18px 18px 18px;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  margin-left: 12px;
  margin-right: 12px;
}
.app-download-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
  text-align: left;
}
.app-download-modal-close {
  position: absolute;
  right: 18px;
  top: 12px;
  font-size: 28px;
  color: #bbb;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.2s, transform 0.2s;
}
.app-download-modal-close:hover { color: #2196f3; transform: rotate(90deg) scale(1.2); }
.app-download-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 10px;
}
.app-download-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  color: #333;
  background: #f7f8fa;
  border-radius: 10px;
  padding: 12px 14px;
}
.app-download-icon {
  width: 38px;
  height: 38px;
  display: inline-block;
  border-radius: 50%;
  background: #eee;
  text-align: center;
  line-height: 38px;
  font-size: 24px;
}
.app-download-icon.android {
  background: #43a047 url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.6 9.48c-.2 0-.36.16-.36.36v4.32c0 .2.16.36.36.36s.36-.16.36-.36V9.84c0-.2-.16-.36-.36-.36zm-11.2 0c-.2 0-.36.16-.36.36v4.32c0 .2.16.36.36.36s.36-.16.36-.36V9.84c0-.2-.16-.36-.36-.36zm10.32-2.16l1.12-1.92a.36.36 0 0 0-.13-.49.36.36 0 0 0-.49.13l-1.13 1.93A7.13 7.13 0 0 0 12 6.36c-1.1 0-2.16.23-3.07.66L7.8 5.09a.36.36 0 0 0-.49-.13.36.36 0 0 0-.13.49l1.12 1.92A7.13 7.13 0 0 0 5.36 10.2c-.2.34-.07.77.27.97.34.2.77.07.97-.27A6.41 6.41 0 0 1 12 7.08c1.13 0 2.2.28 3.13.82.34.2.77.07.97-.27.2-.34.07-.77-.27-.97z"/></svg>') center/60% no-repeat;
}
.app-download-icon.ios {
  background: #2196f3 url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.365 1.43c0 1.14-.93 2.07-2.07 2.07-1.14 0-2.07-.93-2.07-2.07 0-1.14.93-2.07 2.07-2.07 1.14 0 2.07.93 2.07 2.07zm-2.07 3.6c-2.07 0-3.75 1.68-3.75 3.75v7.5c0 2.07 1.68 3.75 3.75 3.75s3.75-1.68 3.75-3.75v-7.5c0-2.07-1.68-3.75-3.75-3.75zm0 13.5c-1.24 0-2.25-1.01-2.25-2.25h4.5c0 1.24-1.01 2.25-2.25 2.25z"/></svg>') center/60% no-repeat;
}
.app-download-btn {
  background: linear-gradient(90deg, #2196f3 60%, #43d06b 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s;
}
.app-download-btn:hover {
  background: linear-gradient(90deg, #43d06b 60%, #2196f3 100%);
}
.app-download-card-list {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 10px;
}
.app-download-card {
  min-width: 160px;
  max-width: 180px;
  min-height: 220px;
  height: 220px;
  padding: 18px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid #e3eaf2;
  box-shadow: 0 4px 24px rgba(33,150,243,0.10);
  transition: box-shadow 0.18s, border 0.18s;
  justify-content: space-between;
}
.app-download-card:hover {
  box-shadow: 0 8px 32px rgba(33,150,243,0.16);
  border: 1.5px solid #2196f3;
}
.app-download-card-logo {
  width: 64px;
  height: 64px;
  margin: 24px 0 12px 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #fafdff 60%, #e3f0ff 100%);
  object-fit: contain;
  box-shadow: 0 1px 4px rgba(33,150,243,0.08);
}
.app-download-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
  margin-top: 6px;
  text-align: center;
}
.app-download-card-btn {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: linear-gradient(90deg, #2196f3 60%, #43d06b 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(33,150,243,0.08);
  letter-spacing: 1px;
}
.app-download-card-btn:hover {
  background: linear-gradient(90deg, #43d06b 60%, #2196f3 100%);
  box-shadow: 0 4px 16px rgba(33,150,243,0.13);
}
.app-download-card-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border-radius: 12px 12px 12px 0;
  padding: 3px 14px;
  z-index: 2;
  background: #ff9800;
  box-shadow: 0 2px 8px rgba(33,150,243,0.13);
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.app-download-card-badge.ios { background: #ff5252; }
.app-download-card-badge.android { background: #ff9800; }
.app-download-card-badge.official { background: #f44336; }

@media (max-width: 600px) {
  .app-download-card-list {
    flex-direction: row;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    align-items: stretch;
    padding-bottom: 2px;
  }
  .app-download-card {
    min-width: 92px;
    max-width: 110px;
    min-height: 120px;
    height: 120px;
    padding: 6px 2px 6px 2px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(33,150,243,0.08);
  }
  .app-download-card-logo {
    width: 48px;
    height: 48px;
    margin: 15px 0 2px 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #fafdff 60%, #e3f0ff 100%);
  }
  .app-download-card-badge {
    top: 0px;
    right: 2px;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 7px 7px 7px 0;
  }
  .app-download-card-title {
    font-size: 11px;
    margin-bottom: 4px;
    margin-top: 1px;
  }
  .app-download-card-btn {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    font-size: 11px;
    padding: 5px 0;
    border-radius: 6px;
    margin-top: 1px;
  }
}
.save-all-btn.active, #getAltUrlBtn.active, #openSaveModal.active, #openAppDownloadModal.active, #btnShare.active {
  box-shadow: none;
  filter: none;
  transition: none;
}
.float-btn-app {
  background: #2196f3;
  color: #fff;
}
.float-btn-app:hover {
  background: #43d06b;
}
.float-app-modal-mask {
  position: fixed;
  z-index: 10001;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18);
  display: none;
  align-items: center;
  justify-content: center;
}
.float-app-modal-mask.active { display: flex; }
.float-app-modal-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(33,150,243,0.13);
  max-width: 320px;
  width: 90vw;
  padding: 24px 18px 18px 18px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  margin-left: 12px;
  margin-right: 12px;
}
.float-app-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #2196f3;
  margin-bottom: 10px;
  text-align: center;
}
.float-app-modal-close {
  position: absolute;
  right: 18px;
  top: 12px;
  font-size: 28px;
  color: #bbb;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.2s, transform 0.2s;
}
.float-app-modal-close:hover { color: #2196f3; transform: rotate(90deg) scale(1.2); }
.float-app-modal-btns {
  display: flex;
  flex-direction: row;
  gap: 18px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 10px;
}
.float-app-btn {
  flex: 1 1 0;
  background: linear-gradient(90deg, #2196f3 60%, #43d06b 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(33,150,243,0.08);
  letter-spacing: 1px;
}
.float-app-btn:hover {
  background: linear-gradient(90deg, #43d06b 60%, #2196f3 100%);
  box-shadow: 0 4px 16px rgba(33,150,243,0.13);
}
.float-app-tip {
  color: #f44336;
  font-size: 13px;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 1px;
}
.float-btn-purple {
  background: #8e24aa;
  color: #fff;
}
.float-btn-purple:hover {
  background: #d500f9;
}
/* 弹窗动画 */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.modal-mask.active, .app-download-modal-mask.active, .save-modal-mask.active, .float-app-modal-mask.active, .contact-modal-mask.active {
  animation: fadeInScale 0.22s cubic-bezier(.68,-0.55,.27,1.55);
}
.modal-box, .app-download-modal-box, .save-modal-box, .float-app-modal-box, .contact-modal-box {
  transition: box-shadow 0.18s, border 0.18s, transform 0.18s, opacity 0.18s;
}
.site-btn, .save-all-btn, .app-download-card-btn, .float-app-btn {
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s, opacity 0.18s;
}
.site-btn:active, .save-all-btn:active, .app-download-card-btn:active, .float-app-btn:active {
  transform: scale(0.97);
  opacity: 0.92;
}
#shareGuideTip {
  transition: opacity 0.3s, transform 0.3s;
  opacity: 1;
  transform: translateY(0);
}
#shareGuideTip[hidden] {
  opacity: 0;
  transform: translateY(20px);
}
/* 骨架屏动画美化 */
.skeleton {
  background: linear-gradient(135deg, #f3f4f6 60%, #e3eaf2 100%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  display: block;
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.45) 60%, rgba(255,255,255,0.13) 100%);
  animation: skeleton-loading 1.2s infinite cubic-bezier(.4,0,.2,1);
}
@keyframes skeleton-loading {
  0% { left: -40%; }
  100% { left: 100%; }
}
.skeleton-title {
  width: 120px;
  height: 22px;
  margin: 18px 0 12px 0;
  border-radius: 8px;
}
.skeleton-card {
  width: 100%;
  height: 90px;
  margin-bottom: 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  box-sizing: border-box;
}
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e3eaf2;
  flex-shrink: 0;
  margin-right: 12px;
  position: relative;
  overflow: hidden;
}
.skeleton-line {
  height: 14px;
  width: 60%;
  background: #e3eaf2;
  border-radius: 6px;
  margin-bottom: 10px;
}
.skeleton-line.short {
  width: 36%;
}
.skeleton-btn {
  width: 70px;
  height: 28px;
  border-radius: 16px;
  background: #e3eaf2;
  margin-top: 8px;
  margin-bottom: 0;
}

/* 弹窗淡出动画 */
@keyframes fadeOutScale {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.92); }
}
.modal-mask.fadeout, .app-download-modal-mask.fadeout, .save-modal-mask.fadeout, .float-app-modal-mask.fadeout, .contact-modal-mask.fadeout {
  animation: fadeOutScale 0.22s cubic-bezier(.68,-0.55,.27,1.55);
}

/* 按钮hover/active更明显 */
.site-btn:hover, .save-all-btn:hover, .app-download-card-btn:hover, .float-app-btn:hover {
  filter: brightness(1.08) drop-shadow(0 2px 8px #2196f3aa);
  box-shadow: 0 4px 16px rgba(33,150,243,0.18);
  opacity: 1;
}
.site-btn:active, .save-all-btn:active, .app-download-card-btn:active, .float-app-btn:active {
  filter: brightness(0.92);
  transform: scale(0.95);
  opacity: 0.85;
}
.footer-info-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.footer-info-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
}
@media (max-width: 600px) {
  .footer-info-flex {
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer-info-group {
    flex-direction: row;
    gap: 4px;
    font-size: 12px;
    justify-content: center;
  }
}