*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:#173f47;background:linear-gradient(135deg,#effbf8,#f7fbff)}button,input,select,textarea{font:inherit}button{cursor:pointer}header{height:64px;position:sticky;top:0;z-index:10;background:#ffffffed;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 max(15px,calc((100% - 1180px)/2));box-shadow:0 4px 20px #123f4810}.brand{text-decoration:none;color:#087b68;font-weight:900;font-size:20px;display:flex;gap:9px;align-items:center}.brand b{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#0a9e82,#5bd6b5)}nav{display:flex;gap:5px}nav a{text-decoration:none;color:#355c63;padding:10px 12px;border-radius:10px;font-weight:750}nav a:hover{background:#e6f7f3}#menu{display:none;background:#e6f7f3;color:#087b68;border:0;border-radius:11px;padding:8px 12px;font-size:20px}.hero{max-width:1180px;margin:28px auto 18px;padding:18px;display:flex;gap:20px;align-items:center}.heroIcon{width:92px;height:92px;display:grid;place-items:center;border-radius:27px;background:linear-gradient(135deg,#0a9d80,#64d9b7);color:#fff;font-size:50px;box-shadow:0 18px 45px #0a8f7328;animation:float 3s ease-in-out infinite}.hero small{font-size:11px;font-weight:900;letter-spacing:1.2px;color:#087c69}.hero h1{font-size:clamp(34px,6vw,54px);margin:6px 0}.hero p{color:#536e75;line-height:1.7;font-size:17px}.grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:16px}.card{max-width:1180px;margin:16px auto;padding:21px;background:#ffffffdf;border:1px solid #d8ece8;border-radius:23px;box-shadow:0 14px 45px #164b5b0d}.head{display:flex;align-items:center;gap:11px}.head>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#e0f7f1;color:#087866;font-weight:900}.head h2{margin:0;font-size:21px}.head p{margin:3px 0;color:#6a8187;font-size:13px}.head em{margin-left:auto;font-style:normal;background:#e5f8f2;color:#087b68;padding:6px 10px;border-radius:99px;font-size:12px;font-weight:900}.types{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:17px 0}.type{border:1px solid #dcece9;background:#f4f9f8;border-radius:13px;padding:11px 5px;color:#355c63;display:flex;flex-direction:column;align-items:center;gap:4px}.type small{font-weight:850}.type.active{background:#dff8f1;border-color:#7ad4c0;color:#087967}.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fields label{font-weight:800;color:#3f6168;font-size:14px}.fields label:has(textarea),.fields label:last-child:nth-child(odd){grid-column:1/-1}.fields input,.fields textarea,.fields select,.custom input,.custom select{width:100%;margin-top:6px;border:1px solid #c9e3df;border-radius:12px;padding:12px;background:#fff;outline:none}.fields textarea{min-height:90px;resize:vertical}.fields input:focus,.fields textarea:focus,.fields select:focus,.custom input:focus,.custom select:focus{border-color:#0a9f82;box-shadow:0 0 0 4px #0a9f8215}.actions{display:flex;gap:9px;margin-top:14px}.actions button{padding:13px 16px;border:0;border-radius:13px;background:#e8f5f2;color:#12695e;font-weight:900}.actions .primary{flex:1;background:linear-gradient(135deg,#0a9e81,#087967);color:#fff}.preview{display:flex;flex-direction:column}.preview #qr{min-height:365px;display:grid;place-items:center;margin:15px 0;border-radius:20px;background:#f7faf9;overflow:hidden}.placeholder{text-align:center;color:#6c8388;font-weight:850;line-height:1.7}.placeholder small{font-weight:500}.preview #qr canvas,.preview #qr svg{max-width:100%;height:auto!important}.downloads{display:grid;grid-template-columns:100px 110px 1fr;gap:7px}.downloads select,.downloads button{border:1px solid #cbe4e0;border-radius:11px;padding:11px;background:#fff;font-weight:800}.downloads button{background:#123f48;color:#fff;border:0}.custom{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:17px}.custom label{font-size:14px;font-weight:800;color:#3d6067}.custom input[type=color]{height:44px;padding:4px}.custom input[type=range]{padding:0;accent-color:#0a9e81}.tip{margin:15px 0 0;padding:12px;border-radius:12px;background:#eef9f6;color:#4e6d73;font-size:13px;line-height:1.6}.guide h2,.faq h2{font-size:30px}.guide h3{color:#087b68;margin-top:28px}.guide p,.faq p{color:#526d74;line-height:1.8}.faq details{border-top:1px solid #dcebe8;padding:15px 0}.faq summary{font-weight:900;cursor:pointer}footer{text-align:center;padding:35px;color:#668087}footer a{color:#087c6b;font-weight:900}@keyframes float{50%{transform:translateY(-8px)}}@media(max-width:850px){header nav{display:none;position:absolute;top:64px;left:10px;right:10px;background:#fff;padding:8px;border-radius:15px;box-shadow:0 15px 35px #123f4820;flex-direction:column}header nav.open{display:flex}#menu{display:block}.hero{margin-top:10px;padding:18px 12px}.heroIcon{width:65px;height:65px;font-size:34px}.grid{grid-template-columns:1fr;margin:0 10px}.card{margin:12px 10px}.grid .card{margin:0 0 12px}.types{grid-template-columns:repeat(3,1fr)}.custom{grid-template-columns:repeat(2,1fr)}.downloads{grid-template-columns:1fr 1fr}.downloads button{grid-column:1/-1}.fields{grid-template-columns:1fr}}@media(max-width:480px){.hero{align-items:flex-start}.hero h1{font-size:30px}.hero p{font-size:15px}.types{grid-template-columns:repeat(2,1fr)}.custom{grid-template-columns:1fr}.downloads{grid-template-columns:1fr}.downloads button{grid-column:auto}.card{padding:16px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.custom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.custom-grid label{font-size:14px;font-weight:850;color:#3d6067;display:flex;flex-direction:column;gap:7px}
.custom-grid select,.custom-grid input[type=file]{width:100%;border:1px solid #c9e3df;border-radius:12px;padding:11px;background:#fff;outline:none}
.custom-grid select:focus,.custom-grid input[type=file]:focus{border-color:#0a9f82;box-shadow:0 0 0 4px #0a9f8215}
.custom-grid input[type=color]{width:46px;height:38px;padding:3px;border:1px solid #c9e3df;border-radius:9px;background:#fff}
.custom-grid input[type=range]{width:100%;padding:0;accent-color:#0a9e81}
.color-row{display:flex;align-items:center;gap:9px}
.color-row output,.custom-grid>label>output{font-size:12px;font-weight:900;color:#527078}
.custom-actions{display:flex;gap:9px;margin-top:16px}
.custom-actions button{border:0;border-radius:12px;padding:12px 16px;background:#e8f5f2;color:#12695e;font-weight:900}
.custom-actions .primary{background:linear-gradient(135deg,#0a9e81,#087967);color:#fff}
.custom-status{margin:11px 0 0;color:#087b68;font-weight:850;font-size:13px}
@media(max-width:850px){.custom-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.custom-grid{grid-template-columns:1fr}.custom-actions{flex-direction:column}.custom-actions button{width:100%}}