.qb-base64-module {
              width: 100%;
              max-width: 100%;
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            }
            
            .qb-b64-container {
              width: 100%;
              max-width: 100%;
              margin: 0 auto;
            }
            
            .qb-input-section {
              display: flex;
              flex-direction: column;
              gap: 16px;
              padding: 0 12px;
              max-width: 100%;
              box-sizing: border-box;
            }
            
            .qb-original-input,
            .qb-result-output {
              width: 100%;
              padding: 12px 16px;
              border: 1px solid #dcdfe6;
              border-radius: 6px;
              font-size: 14px;
              line-height: 1.5;
              resize: vertical;
              transition: border-color 0.2s;
              box-sizing: border-box;
              max-width: 100%;
            }
            
            .qb-original-input:focus,
            .qb-result-output:focus {
              outline: none;
              border-color: #409eff;
            }
            
            .qb-result-output {
              background-color: #f5f7fa;
              color: #606266;
            }
            
            .qb-btn-group {
              display: flex;
              gap: 10px;
              justify-content: center;
              flex-wrap: wrap;
              max-width: 100%;
            }
            
            .qb-primary-btn,
            .qb-secondary-btn,
            .qb-ghost-btn,
            .qb-minor-btn {
              padding: 8px 16px;
              border: 1px solid transparent;
              border-radius: 4px;
              font-size: 14px;
              cursor: pointer;
              transition: all 0.2s;
              min-width: 0;
              flex: 1 0 auto;
              white-space: nowrap;
              box-sizing: border-box;
            }
            
            .qb-primary-btn {
              background-color: #409eff;
              color: white;
              border-color: #409eff;
            }
            
            .qb-primary-btn:hover {
              background-color: #66b1ff;
              border-color: #66b1ff;
            }
            
            .qb-secondary-btn {
              background-color: #67c23a;
              color: white;
              border-color: #67c23a;
            }
            
            .qb-secondary-btn:hover {
              background-color: #85ce61;
              border-color: #85ce61;
            }
            
            .qb-ghost-btn {
              background-color: transparent;
              color: #606266;
              border-color: #dcdfe6;
            }
            
            .qb-ghost-btn:hover {
              color: #409eff;
              border-color: #c6e2ff;
              background-color: #ecf5ff;
            }
            
            .qb-minor-btn {
              background-color: #909399;
              color: white;
              border-color: #909399;
            }
            
            .qb-minor-btn:hover {
              background-color: #a6a9ad;
              border-color: #a6a9ad;
            }
            
            .qb-result-wrapper {
              position: relative;
              width: 100%;
              max-width: 100%;
            }
            
            .qb-result-actions {
              position: absolute;
              right: 12px;
              bottom: 12px;
              display: flex;
              align-items: center;
              gap: 8px;
              pointer-events: none;
            }
            
            .qb-result-length {
              font-size: 12px;
              color: #909399;
              background-color: rgba(255, 255, 255, 0.8);
              padding: 2px 6px;
              border-radius: 3px;
              pointer-events: auto;
            }
            
            .qb-seo-info {
              width: 100%;
              max-width: 100%;
              margin: 30px auto 0;
              padding: 20px 12px;
              border-top: 1px solid #f0f0f0;
              box-sizing: border-box;
            }
            
            .qb-seo-info h3 {
              color: #333;
              font-size: 16px;
              margin-bottom: 12px;
              font-weight: 600;
            }
            
            .qb-seo-info p {
              color: #666;
              font-size: 14px;
              line-height: 1.6;
              margin-bottom: 10px;
              text-align: justify;
            }
            
            /* 手机端响应式调整 */
            @media (max-width: 768px) {
              .qb-input-section {
                padding: 0 8px;
              }
              
              .qb-btn-group {
                gap: 8px;
              }
              
              .qb-primary-btn,
              .qb-secondary-btn,
              .qb-ghost-btn,
              .qb-minor-btn {
                padding: 8px 12px;
                font-size: 13px;
                flex: 1 0 calc(50% - 8px);
                margin-bottom: 4px;
              }
              
              .qb-original-input,
              .qb-result-output {
                padding: 10px 12px;
                font-size: 13px;
              }
              
              .qb-seo-info {
                padding: 20px 8px;
              }
              
              .qb-seo-info h3 {
                font-size: 15px;
              }
              
              .qb-seo-info p {
                font-size: 13px;
              }
            }
            
            /* 小屏幕手机 */
            @media (max-width: 480px) {
              .qb-primary-btn,
              .qb-secondary-btn,
              .qb-ghost-btn,
              .qb-minor-btn {
                flex: 1 0 100%;
                margin-bottom: 8px;
              }
              
              .qb-btn-group {
                gap: 8px;
              }
            }