.main-page{min-height:100vh;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}.main-page .main-header{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:#fff;border-bottom:1px solid #e8e8e8;position:-webkit-sticky;position:sticky;top:0;z-index:100}.main-page .main-header .logo{display:flex;align-items:center;gap:12px}.main-page .main-header .logo .logo-icon{width:32px;height:32px;background:var(--primary-color);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}.main-page .main-header .logo .logo-text{font-size:18px;font-weight:600;color:#262626}.main-page .main-header .header-steps{display:flex;align-items:center;gap:16px}.main-page .main-header .header-steps .step{display:flex;align-items:center;gap:8px;color:#8c8c8c;font-size:14px}.main-page .main-header .header-steps .step.active{color:#262626;font-weight:500}.main-page .main-header .header-steps .step.active .step-number{background:var(--primary-color);color:#fff}.main-page .main-header .header-steps .step .step-number{width:24px;height:24px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500}.main-page .main-header .header-steps .step-arrow{color:#d9d9d9;font-size:12px;margin:0 4px}.main-page .main-header .header-help .help-icon{width:32px;height:32px;border-radius:50%;background:#f0f0f0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.main-page .main-header .header-help .help-icon:hover{background:#e6f7ff;color:#1890ff}.main-page .main-content{display:flex;flex-direction:column;padding:20px 32px;gap:20px;max-width:1400px;margin:0 auto}.main-page .main-content .content-container{display:flex;flex-direction:row;align-items:flex-start;margin:auto;gap:40px}.main-page .main-content .section-header{position:relative;text-align:center;margin-bottom:10px}.main-page .main-content .section-header .curved-arrow{position:absolute;top:-20px;left:100px;z-index:1}.main-page .main-content .section-header .curved-arrow svg{opacity:.8}.main-page .main-content .section-header .section-title h1{font-size:36px;font-weight:700;color:#262626;margin:0 0 12px;line-height:1.2}.main-page .main-content .section-header .section-title h1 .highlight{color:var(--primary-color)}.main-page .main-content .section-header .section-title .choose-type{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}.main-page .main-content .section-header .section-title .choose-type .choose-text{color:var(--primary-color);font-size:16px;font-weight:500}.main-page .main-content .section-header .section-title .choose-type .qr-type-text{color:#262626;font-size:16px;font-weight:600}.main-page .main-content .qr-types-section{flex:1 1;max-width:800px}.main-page .main-content .qr-types-section .qr-types-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:6px;gap:6px}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card{background:#fff;border:1px solid #e8e8e8;border-radius:6px;padding:20px 16px;cursor:pointer;transition:all .3s ease;position:relative;min-height:130px;display:flex;flex-direction:column;align-items:center;text-align:center}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:var(--primary-color);background:rgba(50,83,250,.05)}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card:hover .qr-type-icon{color:var(--primary-color);transform:scale(1.1)}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card.selected{border-color:var(--primary-color);background:rgba(50,83,250,.08)}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card.selected .qr-type-icon{color:var(--primary-color)}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card .qr-type-icon{font-size:36px;color:var(--primary-color);margin-bottom:12px;transition:all .3s ease}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card .qr-type-content .qr-type-name{font-size:16px;font-weight:600;color:#262626;margin:0 0 6px;text-transform:capitalize}.main-page .main-content .qr-types-section .qr-types-grid .qr-type-card .qr-type-content .qr-type-description{font-size:13px;color:#8c8c8c;margin:0;line-height:1.4}.main-page .main-content .preview-section{flex:0 0 360px;position:-webkit-sticky;position:sticky;top:100px}.main-page .main-content .preview-section .phone-mockup{display:flex;justify-content:center;align-items:center}.main-page .main-content .preview-content-wrapper{display:flex;flex-direction:column;height:100%;padding:20px}.main-page .main-content .qr-preview-container{display:flex;justify-content:center;align-items:center;flex:1 1;padding:40px 20px}.main-page .main-content .qr-preview-box{width:180px;height:180px;background:#fff;border:2px solid #3253fa;border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.main-page .main-content .qr-pattern-container{width:100%;height:100%;position:relative;padding:12px}.main-page .main-content .qr-grid{display:grid;grid-template-columns:repeat(25,1fr);grid-template-rows:repeat(25,1fr);width:100%;height:100%;grid-gap:1px;gap:1px}.main-page .main-content .qr-grid-item{width:100%;height:100%;border-radius:1px}.main-page .main-content .qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:var(--primary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600}.main-page .main-content .instruction-text{text-align:center;padding:20px;color:#262626}.main-page .main-content .instruction-title{font-size:18px;font-weight:600;margin:0;line-height:1.4}@media(max-width:1200px){.main-page .main-content{padding:20px 24px}.main-page .main-content .content-container{flex-direction:column;gap:40px;align-items:center}.main-page .main-content .qr-types-section{max-width:none;width:100%}.main-page .main-content .qr-types-section .qr-types-grid{grid-template-columns:repeat(3,1fr);gap:16px}.main-page .main-content .preview-section{position:static;margin-top:0;flex:none;width:100%;max-width:400px}}@media(max-width:768px){.main-page .main-header{padding:12px 16px;flex-wrap:wrap;gap:16px}.main-page .main-header .header-steps{display:none}.main-page .main-content{padding:16px;gap:32px}.main-page .main-content .content-container{gap:32px}.main-page .main-content .section-header .section-title h1{font-size:28px;line-height:1.3}.main-page .main-content .section-header .curved-arrow{display:none}.main-page .main-content .qr-types-section .qr-types-grid{grid-template-columns:repeat(2,1fr);gap:12px}.main-page .main-content .qr-types-section .qr-type-card{padding:16px 12px;min-height:120px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-icon{font-size:28px;margin-bottom:8px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-content .qr-type-name{font-size:14px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-content .qr-type-description{font-size:12px}.main-page .main-content .preview-section{flex:0 0 auto;max-width:320px}.main-page .main-content .preview-section .phone-mockup .phone-frame{width:240px;height:480px}.main-page .main-content .preview-content-wrapper{padding:16px}.main-page .main-content .qr-preview-container{padding:30px 16px}.main-page .main-content .qr-preview-box{width:160px;height:160px}.main-page .main-content .qr-logo{width:28px;height:28px;font-size:10px}.main-page .main-content .instruction-text{padding:16px}.main-page .main-content .instruction-title{font-size:16px}}@media(max-width:480px){.main-page .main-content{padding:12px;gap:24px}.main-page .main-content .content-container{gap:24px}.main-page .main-content .section-header .section-title h1{font-size:24px;line-height:1.4}.main-page .main-content .qr-types-section .qr-types-grid{grid-template-columns:1fr;gap:12px}.main-page .main-content .qr-types-section .qr-type-card{padding:20px 16px;min-height:100px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-icon{font-size:32px;margin-bottom:12px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-content .qr-type-name{font-size:16px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-content .qr-type-description{font-size:13px}.main-page .main-content .preview-section{max-width:280px}.main-page .main-content .preview-section .phone-mockup .phone-frame{width:200px;height:400px}.main-page .main-content .preview-content-wrapper{padding:12px}.main-page .main-content .qr-preview-container{padding:20px 12px}.main-page .main-content .qr-preview-box{width:140px;height:140px}.main-page .main-content .qr-logo{width:24px;height:24px;font-size:9px}.main-page .main-content .instruction-text{padding:12px}.main-page .main-content .instruction-title{font-size:14px}}@media(max-width:320px){.main-page .main-content{padding:8px;gap:20px}.main-page .main-content .content-container{gap:20px}.main-page .main-content .section-header .section-title h1{font-size:20px;line-height:1.4}.main-page .main-content .qr-types-section .qr-types-grid{gap:8px}.main-page .main-content .qr-types-section .qr-type-card{padding:16px 12px;min-height:90px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-icon{font-size:24px;margin-bottom:8px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-content .qr-type-name{font-size:14px}.main-page .main-content .qr-types-section .qr-type-card .qr-type-content .qr-type-description{font-size:11px}.main-page .main-content .preview-section{max-width:240px}.main-page .main-content .preview-section .phone-mockup .phone-frame{width:180px;height:360px}.main-page .main-content .preview-content-wrapper{padding:8px}.main-page .main-content .qr-preview-container{padding:16px 8px}.main-page .main-content .qr-preview-box{width:120px;height:120px}.main-page .main-content .qr-logo{width:20px;height:20px;font-size:8px}.main-page .main-content .instruction-text{padding:8px}.main-page .main-content .instruction-title{font-size:12px}}