/* 完全仿照官方 WhatsApp Web 的样式 */

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

body {
    font-family: "Segoe UI", Helvetica Neue, Helvetica, Lucida Grande, Arial, Ubuntu, Cantarell, Fira Sans, sans-serif;
    background: #efeae2;
    color: #111b21;
    overflow-x: hidden;
}

.wa-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wa-top-bar {
    padding: 27px 40px;
    display: flex;
    align-items: center;
}

.wa-logo-flex {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    font-size: 19px; /* Increased font size */
    color: #00a884; /* Green */
    letter-spacing: 0;
    text-transform: none;
}

.wa-signup-link {
    text-align: center;
    padding: 30px 0 10px;
    font-size: 15px;
    color: #3b4a54;
    font-weight: 500;
}

.wa-signup-link a {
    color: #008069;
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}

.wa-signup-link a:hover {
    text-decoration: underline;
}

.wa-center {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wa-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wa-download-card,
.wa-login-card {
    background: #fff;
    border-radius: 12px;
    border: none;
    box-shadow: 0 17px 50px 0 rgba(11,20,26,.19), 0 12px 15px 0 rgba(11,20,26,.24);
    overflow: hidden;
}

.wa-download-card {
    border-radius: 12px;
}

.wa-login-card {
    border-radius: 12px;
}

.wa-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: #fff;
}

.wa-download-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.wa-download-icon {
    width: 48px;
    height: 48px;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: 0 0 auto;
}

.wa-download-text {
    min-width: 0;
}

.wa-download-title {
    font-size: 16px;
    font-weight: 400;
    color: #41525d;
    line-height: 20px;
    margin-bottom: 4px;
}

.wa-download-desc {
    font-size: 14px;
    color: #667781;
    line-height: 20px;
    white-space: normal;
}

.wa-download-btn {
    appearance: none;
    border: none;
    background: #00a884;
    color: #fff;
    padding: 12px 24px; /* Increased padding */
    border-radius: 24px;
    font-size: 15px; /* Increased font size */
    font-weight: 500;
    cursor: pointer;
    flex: 0 0 auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    gap: 8px; /* Icon spacing */
}

.wa-download-btn:hover {
    background: #008f6f;
    box-shadow: 0 2px 4px rgba(0,168,132,.3);
}

.wa-content {
    display: grid;
    grid-template-columns: 1fr 264px;
    gap: 50px;
    padding: 52px 60px 60px;
}

.wa-left h1 {
    font-size: 28px;
    font-weight: 300;
    color: #41525d;
    margin-bottom: 36px;
}

.wa-left {
    padding-right: 0;
}

.wa-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.steps {
    list-style: none;
    counter-reset: step-counter;
    padding: 0;
    margin: 0;
}

.steps li {
    counter-increment: step-counter;
    margin-bottom: 20px;
    padding-left: 40px; /* Increased padding to 40px */
    position: relative;
    font-size: 18px;
    line-height: 28px;
    color: #111b21; /* Darker text color matching official */
    display: block;
}

.steps li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 2px; /* Fixed top alignment to match first line text */
    font-weight: 500;
    color: #111b21;
    width: 24px;
    height: 24px;
    border: 1px solid #d1d7db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

/* Icon styles */
.icon-whatsapp-small {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: sub; /* Better alignment with text */
    background-color: #25D366;
    border-radius: 6px; /* Slightly softer corners */
    /* Simplified to just the white parts of the logo for cleaner look on green bg */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 33 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6 31.5c8.2 0 14.9-6.7 14.9-14.9C31.5 8.4 24.8 1.7 16.6 1.7c-8.2 0-14.9 6.7-14.9 14.9 0 2.6.7 5.1 2 7.3l-2.1 7.7 7.9-2c2.1 1.1 4.5 1.7 7.1 1.7z' fill='%2325D366'/%3E%3Cpath d='M26.9 7.1c-2.7-2.7-6.4-4.2-10.2-4.2-8 0-14.4 6.5-14.4 14.4 0 2.5.7 5 1.9 7.1l-.3.5-1.2 4.5 4.6-1.2.4.3c2 1.2 4.4 1.8 6.9 1.8 8 0 14.4-6.5 14.4-14.4 0-3.9-1.5-7.5-4.1-10.3zm-10.2 26c-2.2 0-4.4-.6-6.3-1.7l-.5-.3-2.9.8.8-2.8-.3-.5c-1.2-1.9-1.8-4.1-1.8-6.4 0-7 5.7-12.8 12.8-12.8 3.4 0 6.6 1.3 9.1 3.7s3.7 5.7 3.7 9.1c-.1 7-5.8 12.7-12.8 12.7z' fill='%23FFF'/%3E%3Cpath d='M22.7 18.5c-.2-.1-1.3-.6-1.5-.7-.2-.1-.4-.1-.5.1-.2.2-.6.7-.7.9-.1.2-.3.2-.5.1-.2-.1-.9-.3-1.8-1.1-.6-.6-1.1-1.3-1.5-2-.1-.2 0-.4.1-.5.1-.1.2-.2.3-.3.1-.1.1-.2.2-.3.1-.1.2-.2.3-.4.1-.1.1-.3 0-.4-.1-.1-.4-1.1-.6-1.5-.2-.4-.3-.3-.5-.3h-.4c-.2 0-.4.1-.6.2-.2.2-.8.8-.8 2 0 1.2.9 2.4 1 2.5.1.2 1.7 2.6 4.2 3.7 1.6.7 2.3.8 3.1.8.8 0 1.6-.1 2.2-.3.7-.2 1.3-.8 1.5-1.5.2-.7.2-1.3.1-1.4-.1-.2-.4-.3-.6-.4z' fill='%23FFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    margin: 0 4px;
}

.icon-more {
    display: inline-block;
    width: 24px; /* Larger hit area look */
    height: 20px;
    vertical-align: text-bottom;
    background-color: #f0f2f5;
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z' fill='%2354656f'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    margin: 0 2px;
}

.icon-settings {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    background-color: #f0f2f5;
    border-radius: 4px;
    padding: 4px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.137 13.062c-.082 0-.164-.029-.227-.086l-2.066-1.895c-.32-.293-.332-.797-.023-1.102l2.059-2.035c.066-.066.148-.098.23-.09.395.031.758.188 1.055.457.43.39.637.988.543 1.559-.094.57-.453 1.05-1.016 1.332-.191.097-.395.148-.555.156zm-1.637-6.234c-.266-.465-.434-.977-.488-1.512-.016-.117.027-.234.113-.316l2.164-2.07c.059-.059.137-.086.219-.082 1.953.152 3.488 1.832 3.488 3.824 0 .969-.367 1.852-.969 2.52l-4.527 4.96c-.367.402-1.02.402-1.387 0l-3.324-3.64c-.059-.063-.059-.156-.004-.223.324-.391.504-.895.504-1.426 0-.57-.207-1.105-.578-1.516l-.012-.011c-.055-.063-.055-.16 0-.223l4.801-5.266c.004-.004.004-.004 0 0zM9.367 7.625c-.066.074-.168.094-.258.05-1.617-.773-3.48-.562-4.906.57-2.738 2.18-3.039 6.16-.672 8.742 2.367 2.582 6.422 2.691 8.922.25 1.34-1.309 1.945-3.125 1.691-4.922-.02-.121.047-.242.156-.293l2.258-1.047c.105-.051.23-.008.281.094.43 1.05.5 2.19.22 3.29-.53 2.06-2.05 3.79-4.03 4.62-3.87 1.62-8.35-.12-10.09-3.92-1.73-3.8.1-8.31 4.09-10.02 2.04-.87 4.27-.67 6.15.43.105.063.14.195.078.301L9.367 7.625z' fill='%2354656f'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    margin: 0 2px;
}

.icon-info {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' fill='%2354656f'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.wa-link-phone {
    text-align: center;
    color: #008069;
    font-size: 15px;
    font-weight: 500;
    margin-top: 28px;
    cursor: pointer;
}

.wa-link-phone:hover {
    text-decoration: underline;
}


.steps li strong {
    font-weight: 500;
    color: #3b4a54;
}

.qr-wrapper {
    width: 264px;
    height: 264px;
    margin: 0 auto;
    background: white;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none;
}

#qrcode {
    width: 264px;
    height: 264px;
}

#qrcode canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
}

.loading {
    color: #8696a0;
    font-size: 14px;
}

.wa-bottom-badge {
    padding: 0 0 40px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.encrypted-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8696a0;
    font-size: 14px;
    line-height: 20px;
}

.lock-icon {
    font-size: 14px;
    color: #8696a0;
}

.wa-keep {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    color: #3b4a54;
    font-size: 16px;
    user-select: none;
    cursor: pointer;
}

.wa-keep input {
    width: 20px;
    height: 20px;
    accent-color: #00a884;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .wa-center { padding-top: 20px; }
    .wa-content { 
        grid-template-columns: 1fr; 
        gap: 40px;
        padding: 40px;
    }
    .wa-left { text-align: center; }
    .steps li { justify-content: center; }
    .wa-keep { justify-content: center; width: 100%; }
}