* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  background: #f5f7fa;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.lang-switcher {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: 100;
}

.lang-switcher select {
  padding: 8px 32px 8px 14px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  color: white;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 18px;
  min-width: 110px;
}

.lang-switcher select:hover {
  background-color: rgba(0,0,0,0.4);
  border-color: white;
}

.lang-switcher select option {
  color: #333;
  background: white;
  font-size: 14px;
}

.tips-bar {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 10px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #c8e6c9;
}

.tips-icon {
  margin-right: 6px;
}

.header {
  background: linear-gradient(135deg, #1a73e8, #4285f4);
  color: white;
  padding: 40px 0;
  text-align: center;
}

.site-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.site-subtitle {
  font-size: 20px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.site-description {
  font-size: 14px;
  opacity: 0.8;
}

.app-download {
  background: white;
  padding: 30px 0;
  border-bottom: 1px solid #e0e0e0;
}

.app-download .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.app-info h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.app-info p {
  font-size: 14px;
  color: #666;
}

.app-buttons {
  display: flex;
  gap: 12px;
}

.app-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-size: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.app-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.app-store {
  background: #000;
}

.google-play {
  background: #34a853;
}

.app-btn-icon {
  font-size: 20px;
}

.app-btn-text small {
  display: block;
  font-size: 10px;
  opacity: 0.8;
}

.app-btn-text strong {
  display: block;
  font-size: 14px;
}

.device-selector {
  padding: 30px 0 10px;
  background: white;
}

.device-selector h2 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
}

.device-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.device-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 2px solid #e0e0e0;
  background: white;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  transition: all 0.2s;
}

.device-tab:hover {
  border-color: #1a73e8;
  color: #1a73e8;
}

.device-tab.active {
  background: #1a73e8;
  border-color: #1a73e8;
  color: white;
}

.device-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-iphone { 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='M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3-3H7V4h10v14z'/%3E%3C/svg%3E"); }
.icon-android { 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='M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z'/%3E%3C/svg%3E"); }
.icon-samsung { 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='M16 1H8C6.34 1 5 2.34 5 4v16c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm-2 20h-4v-1h4v1zm3-3H7V4h10v14z'/%3E%3C/svg%3E"); }
.icon-router { 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='M20.2 5.9l.8-.8C19.6 3.7 17.8 3 16 3s-3.6.7-5 2.1l.8.8C13 4.8 14.5 4.2 16 4.2s3 .6 4.2 1.7zm-2.1 2.1l.8-.8C18.2 6.5 17.1 6 16 6s-2.2.5-3 1.2l.8.8c.6-.6 1.4-.9 2.2-.9s1.6.3 2.1.9zM19 13h-2V9h-2v4H5c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zM8 18H6v-2h2v2zm3.5 0h-2v-2h2v2zm3.5 0h-2v-2h2v2z'/%3E%3C/svg%3E"); }
.icon-camera { 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='M9.4 10.5l4.77-8.26C13.47 2.09 12.75 2 12 2c-2.4 0-4.6.85-6.32 2.25l3.66 6.35.06-.1zM21.54 9c-.92-2.92-3.15-5.26-6-6.34L11.88 9h9.66zm.26 1h-7.49l.29.5 4.76 8.25C21 16.97 22 14.61 22 12c0-.69-.07-1.35-.2-2zM8.54 12l-3.9-6.75C3.01 7.03 2 9.39 2 12c0 .69.07 1.35.2 2h7.49l-1.15-2zm-6.08 3c.92 2.92 3.15 5.26 6 6.34L12.12 15H2.46zm11.27 0l-3.9 6.76c.7.15 1.42.24 2.17.24 2.4 0 4.6-.85 6.32-2.25l-3.66-6.35-.93 1.6z'/%3E%3C/svg%3E"); }
.icon-smartwatch { 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='M20 12c0-2.54-1.19-4.81-3.04-6.27L16 0H8l-.95 5.73C5.19 7.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8 24h8l.96-5.73C18.81 16.81 20 14.54 20 12zM6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z'/%3E%3C/svg%3E"); }
.icon-gps { 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='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); }

.device-content {
  padding: 20px 0 40px;
  min-height: 400px;
}

.device-panel {
  display: none;
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.device-panel.active {
  display: block;
}

.device-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1a73e8;
}

.steps-list {
  margin-bottom: 24px;
}

.step-item {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #1a73e8;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 14px;
  color: #666;
}

.apn-box {
  background: #f0f4ff;
  border: 1px solid #d0e0ff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.apn-heading {
  font-size: 16px;
  color: #1a73e8;
  margin-bottom: 12px;
}

.apn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.apn-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
}

.apn-label {
  font-weight: 600;
  color: #555;
}

.apn-value {
  color: #1a73e8;
  font-weight: 500;
}

.device-images {
  text-align: center;
}

.device-img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 10px;
}

.footer {
  background: #333;
  color: #aaa;
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
}

.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-link {
  color: #888;
  text-decoration: none;
  font-size: 12px;
}

.admin-link:hover {
  color: white;
}

@media (max-width: 600px) {
  .apn-grid {
    grid-template-columns: 1fr;
  }
  .app-download .container {
    flex-direction: column;
    text-align: center;
  }
  .footer .container {
    flex-direction: column;
    gap: 8px;
  }
}