* {
            box-sizing: border-box;
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 0;
        }

        body {
            background: linear-gradient(145deg, #f6f9fc 0%, #eef2f5 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px;
        }

        .card {
            max-width: 880px;
            width: 100%;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 48px;
            box-shadow: 0 20px 40px -12px rgba(0, 20, 40, 0.3), 0 8px 24px -8px rgba(0, 32, 64, 0.15);
            padding: 32px 28px;
        }

        h1 {
            font-size: 2.1rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            background: linear-gradient(115deg, #0b2b44, #1f4e7a);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sub {
            color: #2c4b66;
            font-weight: 400;
            font-size: 0.95rem;
            margin-bottom: 28px;
            border-left: 4px solid #3080c0;
            padding-left: 16px;
            background: #e7f0f8a0;
            border-radius: 0 40px 40px 0;
            line-height: 1.5;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
        }

        @media (max-width: 620px) {
            .grid-2 {
                grid-template-columns: 1fr;
                gap: 24px;
            }
        }

        .control-panel {
            background: #ffffffc9;
            border-radius: 32px;
            padding: 24px 20px;
            box-shadow: inset 0 1px 4px #ffffff, 0 8px 18px -8px #1f3b4d30;
            border: 1px solid #ffffff;
        }

        .control-group {
            margin-bottom: 22px;
        }

        label {
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            color: #1e4d6f;
            display: block;
            margin-bottom: 6px;
        }

        input, select {
            width: 100%;
            padding: 12px 16px;
            background: #f2f9ff;
            border: 2px solid #cbdbe9;
            border-radius: 60px;
            font-size: 0.95rem;
            outline: none;
            transition: all 0.2s ease;
            color: #04273c;
        }

        input:focus, select:focus {
            border-color: #1070b0;
            background: #ffffff;
            box-shadow: 0 0 0 4px #a0cfee80;
        }

        .color-row {
            display: flex;
            gap: 14px;
            align-items: center;
        }

        .color-row input[type="color"] {
            width: 60px;
            height: 52px;
            padding: 4px;
            border-radius: 30px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .color-row input[type="text"] {
            flex: 1;
        }

        .hint {
            font-size: 0.8rem;
            color: #3f627c;
            margin-top: 5px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .button-group {
            display: flex;
            gap: 16px;
            margin-top: 32px;
            flex-wrap: wrap;
        }

        .btn {
            background: white;
            border: none;
            border-radius: 60px;
            padding: 16px 28px;
            font-weight: 600;
            font-size: 1.1rem;
            box-shadow: 0 4px 10px rgba(18, 67, 112, 0.2);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid rgba(255,255,255,0.8);
            flex: 1 1 auto;
            color: #03263b;
        }

        .btn-primary {
            background: #0f3b5c;
            color: white;
            box-shadow: 0 8px 18px -6px #0a314a;
            border: 1px solid #3182bc;
        }

        .btn-primary:hover {
            background: #184e76;
            transform: scale(1.02);
        }

        .btn-download {
            background: #206b4c;
            color: white;
            box-shadow: 0 8px 18px -6px #1b543e;
            border: 1px solid #389e76;
        }

        .btn-download:hover {
            background: #24805b;
            transform: scale(1.02);
        }

        .qr-preview {
            background: white;
            border-radius: 40px;
            padding: 28px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 16px 32px -16px #13304440, inset 0 1px 4px white;
            border: 1px solid #ffffff;
        }

        .canvas-container {
            background: #ffffff;
            padding: 16px;
            border-radius: 32px;
            box-shadow: inset 0 2px 6px #cadef0, 0 12px 24px -16px #082433;
            margin: 8px 0 18px 0;
            display: flex;
            justify-content: center;
        }

        canvas {
            display: block;
            max-width: 100%;
            height: auto;
            border-radius: 20px;
            background: white;
            box-shadow: 0 0 0 1px #e3ecf3;
        }

        .status {
            font-size: 0.9rem;
            min-height: 28px;
            color: #004070;
            font-weight: 500;
            background: #d5e9ffb3;
            padding: 6px 16px;
            border-radius: 50px;
            margin-top: 6px;
            text-align: center;
            width: fit-content;
            backdrop-filter: blur(4px);
        }

        .badge {
            background: #1d6080;
            color: white;
            padding: 6px 14px;
            border-radius: 36px;
            font-size: 0.8rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .footer-note {
            margin-top: 24px;
            font-size: 0.8rem;
            color: #2c627a;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            border-top: 1px dashed #b0d0e8;
            padding-top: 16px;
        }