:root {      --primary-color: #0084FF;      --primary-gradient: linear-gradient(90deg, #00A3FF 0%, #0066FF 100%);      --primary-hover-gradient: linear-gradient(90deg, #52C0FF 0%, #5297FF 100%);      --secondary-color: #F6F8FF;      --text-color: #151515;      --light-text: #686F7E;      --border-radius: 10px;      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);    }        * {      margin: 0;      padding: 0;      box-sizing: border-box;    }        body {      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;      line-height: 1.6;      color: var(--text-color);      background-color: var(--secondary-color);    }        .container {      width: 100%;      min-height: 100vh;      display: flex;      flex-direction: column;    }        .main-content {      flex: 1;      background-color: var(--secondary-color);      background-image: url("../images/559f6c913534458e87ab238c222550c8.png");      background-size: 100% auto;      background-position: top center;      background-repeat: no-repeat;      padding: 0 20px 60px;    }        @media (min-width: 1200px) {      .main-content {        padding: 0 360px 60px;      }    }        header {      padding-top: 20px;      display: flex;      flex-direction: column;      align-items: flex-start;    }        .logo-text {      display: flex;      align-items: center;      font-size: 28px;      font-weight: bold;      color: var(--primary-color);      margin-bottom: 58px;      gap: 20px;    }        .logo-icon {      width: 100px;      height: 100px;      /*border-radius: 50%;*/    }        .hero-section {      position: relative;      z-index: 1;    }        .hero-title {      font-size: 44px;      font-weight: 500;      line-height: 52px;      color: var(--text-color);      margin-bottom: 7px;    }        .hero-subtitle {      font-size: 22px;      letter-spacing: 7px;      color: rgba(21, 21, 21, 0.6);      line-height: 24px;      margin-bottom: 20px;    }        .save-button {      display: flex;      align-items: center;      justify-content: center;      height: 64px;      min-width: 290px;      padding: 0 40px;      background: var(--primary-gradient);      color: white;      font-size: 24px;      border-radius: 12px;      cursor: pointer;      transition: background 0.3s ease;      border: none;      margin-bottom: 78px;    }        .save-button:hover {      background: var(--primary-hover-gradient);    }        .section-title {      font-size: 20px;      font-weight: 500;      line-height: 28px;      color: var(--text-color);      margin-bottom: 24px;      padding-bottom: 8px;      background-image: url("../images/f5c2f2432bdb48bc9ebcd15721e052be.png");      background-size: 60px 12px;      background-position: left bottom;      background-repeat: no-repeat;    }        .download-grid {      display: grid;      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));      gap: 24px;      margin-bottom: 60px;    }        .download-card {      display: flex;      align-items: center;      background-color: white;      border-radius: var(--border-radius);      padding: 20px 32px;      box-shadow: var(--box-shadow);    }        .app-icon {      width: 56px;      height: 56px;      flex-shrink: 0;    }        .app-info {      flex: 1;      margin-left: 16px;    }        .app-name {      font-weight: 500;      font-size: 16px;      margin-bottom: 8px;    }        .app-description {      font-size: 14px;      color: var(--light-text);    }        .download-button {      background-color: rgba(50, 156, 255, 0.16);      color: var(--primary-color);      font-size: 16px;      font-weight: 500;      padding: 0 20px;      height: 40px;      line-height: 40px;      border-radius: 10px;      cursor: pointer;      transition: all 0.3s ease;      text-decoration: none;      display: inline-flex;      align-items: center;      justify-content: center;      text-align: center;    }        .download-button:hover {      background-color: var(--primary-color);      color: white;    }        .alert {      background-color: white;      color: var(--primary-color);      padding: 15px 20px;      border-radius: var(--border-radius);      margin-bottom: 30px;      box-shadow: var(--box-shadow);      line-height: 1.6;      border: 1px solid rgba(0, 132, 255, 0.2);    }        .highlight {      background-color: rgba(0, 132, 255, 0.1);      color: var(--primary-color);      padding: 0 4px;      font-weight: bold;    }        .installation-guide {      background-color: white;      border-radius: var(--border-radius);      padding: 25px;      margin-bottom: 40px;      box-shadow: var(--box-shadow);    }        .guide-tabs {      display: flex;      flex-wrap: wrap;      gap: 10px;      margin-bottom: 20px;    }        .guide-tab {      padding: 8px 15px;      background-color: rgba(50, 156, 255, 0.16);      border-radius: var(--border-radius);      cursor: pointer;      transition: all 0.3s ease;      color: var(--primary-color);    }        .guide-tab.active {      background-color: var(--primary-color);      color: white;    }        .guide-content {      display: none;    }        .guide-content.active {      display: block;    }        footer {      background-color: white;      padding: 20px;      text-align: center;      color: rgba(0, 0, 0, 0.4);      font-size: 12px;      line-height: 1.6;    }        @media (max-width: 768px) {      header {        display: flex;        justify-content: center;        align-items: center;        width: 100%;        margin-top: 20px;      }            .logo-text {        font-size: 24px;        text-align: center;        margin-bottom: 24px;      }            .hero-title {        font-size: 22px;        line-height: 26px;        text-align: center;        width: 100%;      }            .hero-subtitle {        font-size: 12px;        letter-spacing: 3px;        text-align: center;        width: 100%;      }            .hero-section {        display: flex;        flex-direction: column;        align-items: center;      }            .save-button {        height: 50px;        font-size: 20px;        min-width: 234px;        padding: 0 20px;        margin-bottom: 40px;      }            .download-grid {        grid-template-columns: 1fr;      }            .download-card {        padding: 16px;      }    }        .modal {      display: none;      position: fixed;      z-index: 1000;      left: 0;      top: 0;      width: 100%;      height: 100%;      overflow: auto;      background-color: rgba(0, 0, 0, 0.8);    }        .modal-content {      display: flex;      flex-direction: column;      align-items: center;      justify-content: center;      height: 100%;      width: 100%;      padding: 20px;      box-sizing: border-box;      overflow-y: auto;    }        .modal img.preview-image {      max-height: 60vh;      max-width: 90%;      border-radius: 20px;      pointer-events: auto;      user-select: auto;      object-fit: contain;    }        .close-modal {      position: absolute;      top: 20px;      right: 20px;      color: white;      font-size: 30px;      font-weight: bold;      cursor: pointer;      z-index: 1001;      width: 40px;      height: 40px;      display: flex;      align-items: center;      justify-content: center;      background-color: rgba(0, 0, 0, 0.5);      border-radius: 50%;    }        .custom-icon {      width: 50px;      height: 50px;      background-color: #999;      border-radius: 12px;      display: flex;      align-items: center;      justify-content: center;      color: white;      font-size: 24px;      font-weight: bold;      padding: 10px;      box-sizing: border-box;    }    @media (max-width: 768px) {      .custom-icon {        width: 38px;        height: 38px;        font-size: 18px;        padding: 8px;      }    }    .custom-icon svg {      width: 100%;      height: 100%;      fill: white;    }                                    .modal {  display: none;  position: fixed;  z-index: 1000;  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: auto;  background-color: rgba(0, 0, 0, 0.5);}.modal-content {  background-color: #fefefe;  margin: 15% auto;  padding: 20px;  border: 1px solid #888;  width: 80%;  max-width: 300px;  text-align: center;}.close-modal {  color: #aaa;  float: right;  font-size: 28px;  font-weight: bold;  cursor: pointer;}.close-modal:hover,.close-modal:focus {  color: black;  text-decoration: none;  cursor: pointer;}.download-option {  margin: 10px;  padding: 10px 20px;  background-color: #4CAF50;  color: white;  border: none;  cursor: pointer;}.download-option:hover {  background-color: #45a049;}