/*! 由 ./zh/ext/tools/qrcode/index.html 内联 <style> 原样提取，勿手改（保持视觉一致） */

        *{margin:0;padding:0;box-sizing:border-box;}
        :root{
            --primary:#87CEEB;
            --primary-dark:#4682B4;
            --bg:#f0f4f8;
            --card:#FFFFFF;
            --text:#333;
            --gray:#666;
            --gap-sm:8px;
            --gap-md:16px;
            --gap-lg:24px;
            --padding-sm:12px;
            --padding-md:20px;
            --padding-lg:30px;
            --card-shadow:0 8px 24px rgba(135,206,235,0.4);
            --radius:16px;
            --elastic-out: cubic-bezier(0.34, 1.56, 0.64, 1);
            --elastic-soft: cubic-bezier(0.22, 1, 0.36, 1);
        }
        /* 背景装饰 */
        body::before {
            content: ''; position: fixed; top: 0; left: 0;
            width: 100%; height: 100%;
            background:
                radial-gradient(ellipse at 20% 50%, rgba(135,206,235,0.10), transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(70,130,180,0.06), transparent 50%);
            z-index: 0;
            animation: bgDrift 14s ease-in-out infinite alternate;
            pointer-events: none;
        }
        @keyframes bgDrift {
            0%   { transform: scale(1); opacity: 0.7; }
            100% { transform: scale(1.04); opacity: 1; }
        }
        body{
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
            background:var(--bg);color:var(--text);
            min-height:100vh;display:flex;flex-direction:column;position:relative;
        }
        /* 导航栏 */
        .navbar{
            background:var(--primary);padding:12px 0;
            box-shadow:0 2px 10px rgba(0,0,0,0.1);
            position:sticky;top:0;z-index:100;width:100%;
            opacity:0;transform:translateY(-100%);
            animation:navSlideIn 0.7s var(--elastic-soft) 0.1s forwards;
        }
        @keyframes navSlideIn{to{opacity:1;transform:translateY(0);}}
        .nav-container{
            max-width:1200px;margin:0 auto;
            display:flex;justify-content:space-between;align-items:center;
            padding:0 var(--padding-sm);
        }
        .logo{
            font-size:clamp(1.1rem,4vw,1.4rem);
            font-weight:bold;color:var(--primary-dark);
            text-decoration:none;
            transition:transform 0.35s var(--elastic-out);
        }
        .logo:hover{transform:scale(1.06);}
        .nav-links{display:flex;gap:clamp(10px,3vw,18px);}
        .nav-links a{
            color:var(--primary-dark);font-weight:500;
            text-decoration:none;
            font-size:clamp(0.85rem,3vw,0.95rem);
            position:relative;padding-bottom:4px;
            transition:color 0.3s ease;
        }
        .nav-links a::after{
            content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
            background:var(--primary-dark);border-radius:2px;
            transition:width 0.35s var(--elastic-out);
        }
        .nav-links a:hover::after{width:100%;}
        .nav-links a:hover{font-weight:600;}
        /* 页面容器 */
        .page-wrapper{
            flex:1;display:flex;flex-direction:column;
            align-items:center;padding:var(--padding-lg) var(--padding-sm);
            position:relative;z-index:1;
        }
        .container{
            max-width:700px;width:100%;
            display:flex;flex-direction:column;gap:var(--gap-lg);
        }
        .card{
            background:var(--card);border-radius:var(--radius);
            box-shadow:var(--card-shadow);
            padding:clamp(var(--padding-md),4vw,var(--padding-lg));
            opacity:0;transform:translateY(24px) scale(0.98);
            animation:cardIn 0.8s var(--elastic-out) 0.3s forwards;
            transition:transform 0.35s var(--elastic-out),
                        box-shadow 0.35s ease;
        }
        .card:hover{
            transform:translateY(-4px);
            box-shadow:0 16px 40px rgba(135,206,235,0.5);
        }
        @keyframes cardIn{to{opacity:1;transform:translateY(0) scale(1);}}
        /* 标题 */
        .card h1{
            color:var(--primary-dark);text-align:center;
            margin-bottom:var(--gap-lg);
            font-size:clamp(1.3rem,5vw,1.6rem);
        }
        /* 文本输入框 */
        textarea{
            width:100%;height:120px;padding:14px 16px;
            font-size:15px;font-family:inherit;
            border:1px solid #d0e8f5;border-radius:10px;
            resize:vertical;margin-bottom:var(--gap-md);
            background:#f8fbff;color:var(--text);
            transition:border-color 0.25s,box-shadow 0.25s;
        }
        textarea:focus{
            outline:none;border-color:var(--primary-dark);
            box-shadow:0 0 0 3px rgba(70,130,180,0.12);
        }
        /* 美化面板 */
        .beautify-panel{
            background:#f8fbff;padding:14px;border-radius:10px;
            margin-bottom:var(--gap-md);text-align:left;font-size:14px;
            border:1px solid #d0e8f5;
        }
        .beautify-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
        .beautify-row:last-child{margin-bottom:0;}
        .beautify-row label{min-width:65px;font-weight:500;color:var(--primary-dark);}
        input[type="color"]{width:60px;height:32px;padding:0;border:1px solid #d0e8f5;border-radius:6px;cursor:pointer;}
        .gradient-presets{display:flex;gap:6px;flex-wrap:wrap;}
        .gradient-btn{
            padding:5px 12px;border:none;border-radius:6px;
            cursor:pointer;font-size:12px;color:#fff;font-weight:600;
            transition:transform 0.25s var(--elastic-out),opacity 0.25s;
        }
        .gradient-btn:hover{transform:scale(1.06);opacity:0.9;}
        .gradient-btn:active{transform:scale(0.95);}
        .gradient-btn[data-type="none"]{background:#6b7280;}
        .gradient-btn[data-type="blue"]{background:linear-gradient(to right,#007cf0,#00f2c2);}
        .gradient-btn[data-type="purple"]{background:linear-gradient(to right,#6441A5,#2a0845);}
        .gradient-btn[data-type="green"]{background:linear-gradient(to right,#11998e,#38ef7d);}
        .gradient-btn[data-type="orange"]{background:linear-gradient(to right,#ff6b6b,#feca57);}
        /* 选项 */
        .options{
            display:flex;justify-content:space-between;
            align-items:center;margin-bottom:var(--gap-md);font-size:14px;
        }
        .option-item{display:flex;align-items:center;gap:6px;}
        .option-item label{color:var(--text);cursor:pointer;}
        /* 文件名输入 */
        .filename-row{
            margin-bottom:var(--gap-md);text-align:left;
        }
        .filename-row label{font-size:14px;margin-right:10px;color:var(--gray);}
        .filename-row input{
            padding:10px 12px;width:100%;
            border:1px solid #d0e8f5;border-radius:8px;
            font-size:14px;font-family:inherit;
            background:#f8fbff;transition:border-color 0.25s;
        }
        .filename-row input:focus{outline:none;border-color:var(--primary-dark);}
        /* 按钮 */
        .controls{display:flex;gap:var(--gap-md);justify-content:center;flex-wrap:wrap;margin-bottom:var(--gap-md);}
        button{
            padding:12px 28px;font-size:15px;border:none;border-radius:10px;
            cursor:pointer;font-weight:600;
            transition:transform 0.25s var(--elastic-out),box-shadow 0.25s,background 0.25s;
        }
        button:hover{transform:translateY(-2px);}
        button:active{transform:scale(0.97);}
        .btn-primary{
            background:var(--primary-dark);color:#fff;
            box-shadow:0 4px 12px rgba(70,130,180,0.3);
        }
        .btn-primary:hover{background:#3a6f9c;box-shadow:0 6px 18px rgba(70,130,180,0.4);}
        .btn-secondary{
            background:var(--primary);color:var(--primary-dark);
        }
        .btn-secondary:hover{box-shadow:0 4px 12px rgba(135,206,235,0.4);}
        /* 二维码容器 */
        #qrcode-container{
            display:flex;justify-content:center;align-items:center;
            min-height:280px;margin:var(--gap-md) 0;
        }
        #qrcode-container img{max-width:100%;height:auto;border-radius:8px;}
        #qrcode-container canvas{max-width:100%;height:auto;border-radius:8px;}
        /* 分享链接 */
        .share-link-box{
            margin-top:10px;padding:10px 14px;
            background:#fef7e0;border:1px solid #f5e6a3;
            border-radius:8px;text-align:left;font-size:13px;display:none;
        }
        .share-link-box a{color:var(--primary-dark);word-break:break-all;}
        /* 日志 */
        #log-box{
            background:#f8fbff;padding:12px 14px;border-radius:8px;
            text-align:left;font-size:12px;color:var(--gray);
            height:100px;overflow-y:auto;white-space:pre-wrap;
            border:1px solid #d0e8f5;margin-top:var(--gap-sm);
        }
        /* 页脚 */
        footer{
            text-align:center;padding:var(--padding-md);
            background:var(--primary);color:var(--primary-dark);
            font-size:14px;width:100%;
            opacity:0;animation:footerIn 0.8s ease 0.6s forwards;
        }
        @keyframes footerIn{to{opacity:1;}}
        /* 响应式 */
        @media(max-width:640px){
            .page-wrapper{padding:var(--padding-md) var(--padding-sm);}
            .card{padding:18px;}
            .card h1{font-size:1.2rem;}
            .controls{flex-direction:column;align-items:stretch;}
            button{width:100%;}
            .options{flex-direction:column;gap:8px;align-items:flex-start;}
        }