body {
                background: #f6fcff;
                margin: 0;
                font-family: "Segoe UI", Arial, sans-serif;
            }
            .container {
                max-width: 470px;
                margin: 40px auto 0 auto;
                background: #fff;
                border-radius: 16px;
                box-shadow: 0 4px 22px #13d2b033;
                padding: 30px 16px 24px 16px;
            }
            .logo {
                font-size: 1.28em;
                color: #1558b3;
                font-weight: bold;
                text-align: center;
                margin-bottom: 12px;
            }
            .desc {
                color: #227088;
                text-align: center;
                margin-bottom: 22px;
                font-size: 1.01em;
            }
            .tab-toggle {
                display: flex;
                gap: 8px;
                margin-bottom: 20px;
                justify-content: center;
            }
            .tab-btn {
                flex: 1 1 120px;
                background: #e9f1fa;
                color: #1558b3;
                border: 1.2px solid #b8d6fa;
                border-radius: 8px;
                font-size: 1.05em;
                font-weight: 600;
                padding: 0.7em 0;
                cursor: pointer;
                transition:
                    background 0.13s,
                    color 0.13s;
                outline: none;
                margin-bottom: 2px;
            }
            .tab-btn.active {
                background: #1558b3;
                color: #fff;
                border-color: #1558b3;
                box-shadow: 0 2px 10px #1558b311;
            }
            .section {
                display: none;
            }
            .section.active {
                display: block;
            }
            .label {
                font-size: 0.98em;
                color: #266;
                margin-bottom: 7px;
                margin-top: 11px;
                display: block;
            }
            .input-area {
                width: 100%;
                min-height: 44px;
                border: 1.2px solid #bad1ec;
                border-radius: 8px;
                padding: 10px;
                font-size: 1em;
                background: #fafdff;
                margin-bottom: 14px;
            }
            #qrCode {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 16px auto 9px auto;
            }
            .qr-options {
                text-align: center;
                margin-bottom: 12px;
            }
            .qr-options label {
                margin-right: 9px;
                font-size: 0.98em;
                color: #277;
            }
            .qr-btn {
                background: #19b16e;
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 10px 20px;
                font-size: 1.06em;
                font-weight: bold;
                cursor: pointer;
                margin-top: 6px;
                margin-left: 35%;
                transition: background 0.13s;
            }
            .qr-btn:active {
                background: #0e8051;
            }
            .qr-download {
                display: block;
                color: #1664a7;
                margin: 11px auto 0 auto;
                text-align: center;
                font-size: 1.02em;
                text-decoration: underline;
            }
            #reader {
                margin-top: 17px;
                margin-bottom: 18px;
            }
            #reader > div {
                border-radius: 12px;
                overflow: hidden;
            }
            .or {
                text-align: center;
                color: #bbb;
                font-size: 0.98em;
                margin: 16px 0 7px 0;
            }
            .output-box {
                text-align: center;
                margin-top: 15px;
                word-break: break-all;
                font-size: 1.06em;
                color: #146a3b;
            }
            .footer {
                color: #888;
                text-align: center;
                font-size: 0.93em;
                margin-top: 16px;
            }
            #backBtn {
                position: fixed;
                left: 50%;
                bottom: 32px;
                transform: translateX(-50%);
                background: #13b6a7;
                color: #fff;
                font-weight: 700;
                border: none;
                border-radius: 2rem;
                padding: 0.58em 1.5em;
                box-shadow: 0 4px 16px #13d2b066;
                font-size: 1.09em;
                text-decoration: none;
                cursor: pointer;
                letter-spacing: 0.01em;
                transition:
                    background 0.15s,
                    transform 0.12s;
                z-index: 2000;
            }
            #backBtn:hover {
                background: #0e8078;
                transform: translateX(-50%) scale(1.04);
            }
            @media (max-width: 600px) {
                .container {
                    max-width: 99vw;
                    padding: 9px 2vw 10px 2vw;
                }
                .tab-btn {
                    font-size: 0.97em;
                }
                #backBtn {
                    bottom: 18px;
                    font-size: 0.98em;
                    padding: 0.48em 1em;
                }
            }