*, *::before, *::after {
		  box-sizing: inherit;
		}

		html {
			box-sizing: border-box;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		body > .footer {
		  margin-top: auto;
		  width: 100%;
		}

		body {
			box-sizing: border-box;
			height: 100%;
			margin: 0;
			padding: 0;
			font-family: 'Segoe UI', sans-serif;
			background: #0077ff;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.top-logo-wrapper {
			padding-top: 30px;
			text-align: center;
			margin-bottom: 1rem;
		}

		.top-logo {
			height: 80px;
		}

		.mode-toggle {
		  display: flex;
		  justify-content: center;
		  gap: 1rem;
		  margin-bottom: 1.5rem;
		}

		.mode-toggle button {
		  padding: 10px 16px;
		  border-radius: 10px;
		  font-size: 1rem;
		  font-weight: bold;
		  border: 2px solid #00AEEF;
		  background-color: white;
		  color: #00AEEF;
		  cursor: pointer;
		  transition: all 0.3s ease;
		}

		.mode-toggle button:hover {
		  background-color: #e6f7ff;
		}

		.mode-toggle button.active {
		  background-color: #00AEEF;
		  color: white;
		}

		.radar-container {
		  position: relative;
		  width: 350px;
		  height: 350px;
		  margin: 0 auto 1.5rem;
		  border-radius: 50%;
		  box-shadow: 0 0 20px rgba(0, 238, 255, 0.15);
		  background: radial-gradient(circle at center, rgba(0,238,255,0.05), transparent);
		}

		.radar-background, .radar-beam, .radar-lock,
		.shield-center, .shield-beam {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 2;
		}

		.shield-beam {
		  filter: drop-shadow(0 0 10px #00f0ff);
		  transform-origin: center center;
		  z-index: 1;
		}

		.radar-beam {
		  transform-origin: center center;
		  z-index: 1;
		  pointer-events: none;
		}

		.radar-lock {
		  z-index: 3;
		  pointer-events: none;
		}

		#logArea {
			display: none;
			background: linear-gradient(to right, #002f5f, #003f7f);
			border-radius: 12px;
			padding: 1.2rem 1.5rem;
			color: #d0f0ff;
			font-family: 'Courier New', monospace;
			font-size: 0.95rem;
			width: 100%;
			max-height: 220px;
			overflow-y: auto;
			margin: 3rem 0 3rem 0;
			box-shadow: inset 0 0 12px rgba(0, 174, 239, 0.2);
			scrollbar-width: thin;
			scrollbar-color: #00aeef transparent;
			transition: background 0.5s;
			border: 1px solid rgba(0, 174, 239, 0.3);
		}

		#logArea::-webkit-scrollbar {
			width: 6px;
		}
		
		#logArea::-webkit-scrollbar-thumb {
			background: #00aeef;
			border-radius: 4px;
		}

		.log-container {
			background: transparent !important;
			border: none !important;
			box-shadow: none !important;
			padding: 0;
		}
		
		.log-line {
			display: flex;
			align-items: center;
			gap: 0.8rem;
			padding: 0.4rem 1rem;
			border-left: 3px solid #00aeef;
			margin-bottom: 6px;
			background-color: rgba(255, 255, 255, 0.04);
			border-radius: 6px;
			font-family: 'Courier New', monospace;
		}

		.log-badge {
			font-size: 0.75rem;
			font-weight: bold;
			padding: 2px 6px;
			border-radius: 6px;
			color: white;
			background: #0077ff;
			min-width: 50px;
			text-align: center;
			animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.4; }
		}

		.log-line::before {
			position: absolute;
			left: 0;
			color: #00f0ff;
			font-size: 1.2rem;
			line-height: 1;
			top: 2px;
		}

		.status-row {
			text-align: center;
			margin: 1rem 0 1rem 0;
		}

		.status {
			padding: 8px 14px;
			border-radius: 12px;
			font-weight: bold;
			display: inline-block;
			font-size: 1rem;
		}

		.status.success {
		  background-color: #d1f4e5;
		  color: #0a8f59;
		}

		.status.fail {
		  background-color: #fce2e2;
		  color: #d62525;
		}

		button {
		  padding: 10px 16px;
		  background-color: #00AEEF;
		  color: white;
		  font-size: 1rem;
		  border: none;
		  border-radius: 10px;
		  cursor: pointer;
		  width: 100%;
		}

		button:hover {
		  background-color: #008ec2;
		}

		.float-bubble {
		  animation: float-up-down 2.5s ease-in-out infinite;
		}

		@keyframes float-up-down {
		  0%, 100% { transform: translateY(0); }
		  50% { transform: translateY(-5px); }
		}
		
		.footer {
		  background: url('https://www.tronlink.org/home/images/page5-bg.png') no-repeat center center;
		  background-size: cover;
		  color: white;
		  padding: 2.5rem 20rem;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 0.9rem;
		  position: relative;
		  z-index: 1;
		}

		.footer::before {
		  content: "";
		  position: absolute;
		  top: 0;
		  left: 0;
		}

		.footer-left,
		.footer-right {
		  display: flex;
		  align-items: center;
		  gap: 20px;
		  z-index: 1;
		}

		.footer img {
		  width: 32px;
		  height: 32px;
		  border-radius: 50%;
		  background: white;
		  padding: 6px;
		}

		.footer-link {
		  color: white;
		  text-decoration: underline;
		  cursor: pointer;
		}
		
		.social-icon {
		  display: inline-flex;
		  justify-content: center;
		  align-items: center;
		  width: 36px;
		  height: 36px;
		  background-color: white;
		  border-radius: 50%;
		  text-decoration: none;
		  color: #1a1a1a;
		  font-size: 16px;
		  transition: all 0.3s ease;
		}

		.social-icon:hover {
		  background-color: #dcefff;
		  color: #0077ff;
		}

		.new-layout {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  padding: 2rem;
		  margin-bottom: 1rem;
		  background: white;
		  border-radius: 20px;
		  max-width: 1080px;
		  width: 100%;
		  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		}

		.layout-content {
		  display: flex;
		  width: 100%;
		  align-items: center;
		  justify-content: space-between;
		}

		.layout-content > * {
		  padding: 0 1rem;
		}
		
		.start-button-wrapper {
		  margin-top: 2rem;
		  width: 100%;
		  display: flex;
		  justify-content: center;
		}

		#startBtn {
		  padding: 12px 24px;
		  font-size: 1.1rem;
		  border-radius: 10px;
		  border: none;
		  background-color: #00AEEF;
		  color: white;
		  cursor: pointer;
		  box-shadow: 0 4px 10px rgba(0, 174, 239, 0.3);
		  transition: background-color 0.3s ease;
		}

		#startBtn:hover {
		  background-color: #008ec2;
		}
		
		.title {
		  font-size: 1.8rem;
		  color: #333;
		  margin-bottom: 1rem;
		  font-weight: 500;
		}

		.subtitle {
		  font-size: 2rem;
		  color: #0077ff;
		  font-weight: bold;
		}

		.feature {
		  display: flex;
		  align-items: flex-start;
		  gap: 0.8rem;
		  margin-top: 2rem;
		  margin-bottom: 2rem;
		}

		.feature p {
		  margin: 0;
		  margin-left: 1.5rem;
		  line-height: 1.5;
		}

		.language-switcher {
		  position: absolute;
		  top: 20px;
		  right: 20px;
		  z-index: 1000;
		  display: flex;
		  gap: 10px;
		}

		.lang-btn {
		  background-color: white;
		  border: 1px solid #00AEEF;
		  color: #00AEEF;
		  padding: 6px 12px;
		  border-radius: 8px;
		  cursor: pointer;
		  font-weight: bold;
		  transition: all 0.3s ease;
		}

		.lang-btn:hover {
		  background-color: #e6f7ff;
		}

		.lang-btn.active {
		  background-color: #00AEEF;
		  color: white;
		}
		
		button:disabled {
		  opacity: 0.5;
		  cursor: not-allowed;
		}
		
		.scan-result-card {
		  margin-top: 1.5rem;
		  padding: 1.5rem 2rem;
		  border-radius: 16px;
		  background: rgba(255, 255, 255, 0.06);
		  border: 2px dashed #00aeef;
		  text-align: center;
		  max-width: 360px;
		  margin-left: auto;
		  margin-right: auto;
		  box-shadow: 0 0 12px rgba(0, 174, 239, 0.2);
		}
		
		.response {
		  color: #7effcb;
		  font-size: 0.85rem;
		  margin-left: 0.5rem;
		  font-family: 'Courier New', monospace;
		}
		
		.background-bubbles {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  z-index: 0;
		  pointer-events: none;
		  overflow: hidden;
		}

		.bubble-left {
		  position: absolute;
		  top: 60px;
		  left: 20px;
		  width: 200px;
		  opacity: 0.3;
		  filter: blur(1px);
		}

		.bubble-right {
		  position: absolute;
		  bottom: 60px;
		  right: 20px;
		  width: 240px;
		  opacity: 0.3;
		  filter: blur(1px);
		}
		
		@media (max-width: 768px) {
		  .top-logo-wrapper {
			padding-top: 20px;
			text-align: center;
			z-index: 10;
		  }

		  .top-logo {
			height: 60px;
		  }

		  .language-switcher {
			top: 10px;
			right: 10px;
			flex-direction: column;
			gap: 6px;
			z-index: 5;
		  }

		  .lang-btn {
			padding: 4px 10px;
			font-size: 0.85rem;
		  }

		  .mode-toggle {
			flex-direction: column;
			gap: 0.5rem;
			width: 80%;
			padding-inline: 1rem;
		  }

		  .new-layout {
			width: 90%;
			max-width: 420px;
			margin: 1rem auto; /* 水平置中 */
			padding: 1.5rem 1rem;
			border-radius: 16px;
			box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
		  }

		  .layout-content {
			flex-direction: column;
			gap: 1.5rem;
		  }

		  .radar-container {
			width: 250px;
			height: 250px;
		  }

		  .title {
			font-size: 1.5rem;
			text-align: center;
		  }

		  .subtitle {
			font-size: 1.6rem;
			text-align: center;
		  }

		  .feature {
			flex-direction: column;
			align-items: center;
			text-align: center;
			margin-top: 1.5rem;
			margin-bottom: 1.5rem;
		  }

		  .feature img {
			width: 36px;
			height: 36px;
		  }

		  .feature p {
			margin-left: 0;
			font-size: 0.95rem;
		  }

		  .start-button-wrapper {
			width: 100%;
			justify-content: center;
		  }

		  #startBtn {
			width: 100%;
		  }

		  #logArea {
			margin: 1.5rem auto;
			width: 90%;
			max-width: 100%;
			overflow-x: hidden;
		  }

		  .scan-result-card {
			max-width: 100%;
			padding: 1rem;
			margin-inline: 1rem;
		  }

		  .footer {
			flex-direction: column;
			padding: 2rem 1rem;
			text-align: center;
			gap: 1.2rem;
		  }

		  .footer-left,
		  .footer-right {
			flex-direction: column;
			gap: 0.8rem;
			align-items: center;
		  }

		  .bubble-left {
			width: 140px;
			top: 40px;
			left: 10px;
		  }

		  .bubble-right {
			width: 180px;
			bottom: 40px;
			right: 10px;
		  }

		  .new-layout,
		  .mode-toggle,
		  .top-logo-wrapper {
			position: relative;
			z-index: 10;
		  }

		  .background-bubbles {
			z-index: 0;
		  }
		  
		  .log-line {
			flex-wrap: wrap;
			align-items: flex-start;
			font-size: 0.85rem;
			padding: 0.6rem;
			gap: 0.5rem;
		  }

		  .response {
			margin-left: 0;
			flex-basis: 100%;
			text-align: left; /* ← 改成靠左 */
			font-size: 0.8rem;
			color: #7effcb;
		  }
		  
		  .footer-left {
			flex-direction: row;
			justify-content: center;
			gap: 1rem;
			flex-wrap: nowrap;
		  }

		  .social-icon {
			width: 40px;
			height: 40px;
			font-size: 18px;
		  }
		}