:root{--page-bg:linear-gradient(160deg, #0d2818 0%, #1b4332 40%, #1b4332 100%);--page-color:#d8f3dc;--panel-bg:#fffffff7;--page-border:#95d5b2;--page-accent:#2d6a4f;--white:#fff;--radius:8px}*{box-sizing:border-box}body{min-height:100vh;color:var(--page-color);background:var(--page-bg);-webkit-font-smoothing:antialiased;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5;transition:background .4s ease-in-out,color .4s ease-in-out}.app{flex-direction:column;max-width:1000px;min-height:100vh;margin:0 auto;padding:20px 16px;display:flex}.header{text-align:center;flex-shrink:0;margin-bottom:20px}.header h1{letter-spacing:-.02em;color:var(--page-color);margin:0;font-size:1.5rem;font-weight:700;transition:color .4s ease-in-out}.main{flex:1;grid-template-columns:minmax(280px,1fr) minmax(280px,50%);align-items:start;gap:20px;display:grid}.controls-column{flex-direction:column;gap:24px;display:flex}@media (max-width:700px){.main{grid-template-columns:1fr}}.panel{background:var(--panel-bg);border:1px solid var(--page-border);border-radius:var(--radius);padding:20px;transition:border-color .4s ease-in-out,background .4s ease-in-out;box-shadow:0 4px 16px #0000001f}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.control-blocks{flex-direction:column;gap:24px;display:flex}.control-block{flex-direction:column;gap:10px;display:flex}.control-block-title{letter-spacing:.04em;text-transform:uppercase;color:var(--page-accent);margin:0;font-size:.8125rem;font-weight:600;line-height:1.3;transition:color .4s ease-in-out}.control-block-content .field{margin:0}.control-block-content textarea{resize:vertical;min-height:68px}.control-block-preset .preset-buttons{margin:0}.preset-buttons{flex-wrap:wrap;gap:10px;display:flex}.preset-btn{background:var(--panel-bg);border:2px solid var(--page-border);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:center;width:56px;height:56px;padding:6px;transition:border-color .4s ease-in-out,box-shadow .4s ease-in-out;display:flex}.preset-btn:hover{border-color:var(--page-accent)}.preset-btn.active{border-color:var(--page-accent);box-shadow:0 0 0 2px var(--page-accent)}.preset-btn img{object-fit:contain;width:40px;height:40px;display:block}.control-block-decorations{border:none;border-top:1px solid var(--page-border);margin:0;padding:24px 0 0;transition:border-color .4s ease-in-out}.control-block-decorations[open]{padding-top:24px}.control-block-summary{cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none}.control-block-summary::-webkit-details-marker{display:none}.control-block-summary:before{content:"▶";vertical-align:.1em;margin-right:8px;font-size:.6em;transition:transform .2s;display:inline-block}.control-block-decorations[open] .control-block-summary:before{transform:rotate(90deg)}.params-grid{grid-template-columns:repeat(3,1fr);place-items:start stretch;gap:12px 16px;max-width:380px;margin:0 auto;padding:16px 0 0;display:grid}.params-grid .field{min-width:0;margin:0}.params-grid .field+.field{margin-top:0}.params-grid input[type=color],.params-grid select,.params-grid input[type=number]{box-sizing:border-box;height:40px}.params-grid select{padding:8px 12px}@media (max-width:440px){.params-grid{grid-template-columns:1fr 1fr;max-width:100%}}@media (max-width:260px){.params-grid{grid-template-columns:1fr}}label{color:var(--page-accent);margin-bottom:6px;font-weight:500;transition:color .4s ease-in-out;display:block}input[type=text],input[type=number],textarea,select{width:100%;font:inherit;color:#1a1a1a;border:1px solid var(--page-border);border-radius:var(--radius);background:#f8faf8;padding:10px 12px}input[type=color]{border:1px solid var(--page-border);border-radius:var(--radius);cursor:pointer;width:100%;height:40px;padding:4px}textarea{resize:vertical;min-height:72px}textarea::placeholder{color:#64748b;opacity:.9}.hint,.preview-hint{color:var(--page-accent);margin-top:6px;font-size:.8rem;transition:color .4s ease-in-out;display:block}.download-qr{color:var(--white);background:var(--page-accent);border:1px solid var(--page-accent);border-radius:var(--radius);cursor:pointer;padding:10px 20px;font-size:.95rem;font-weight:500;transition:background .4s ease-in-out,border-color .4s ease-in-out,opacity .15s ease-in-out}.download-qr:hover{opacity:.9;filter:brightness(1.1)}.preview{position:sticky;top:20px}.preview-inner{flex-direction:column;align-items:center;gap:16px;display:flex}.canvas-wrap{border-radius:var(--radius);border:1px solid var(--page-border);background:#f8faf8;justify-content:center;align-items:center;min-height:260px;padding:0;transition:border-color .4s ease-in-out;display:flex;position:relative;overflow:hidden}.canvas-wrap canvas,.canvas-wrap svg{max-width:100%;height:auto;display:block}.spinner{border-radius:var(--radius);background:#d8f3dce6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.spinner[hidden]{display:none}.spinner:after{content:"";border:3px solid var(--page-border);border-top-color:var(--page-accent);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spinner}@keyframes spinner{to{transform:rotate(360deg)}}.preview-hint{color:var(--page-color);opacity:.8;margin:0;transition:color .4s ease-in-out}.footer{text-align:center;color:var(--page-color);opacity:.9;border:1px solid var(--page-border);border-radius:var(--radius);background:#0003;flex-shrink:0;margin-top:auto;padding:16px 20px;font-size:.85rem;transition:color .4s ease-in-out,border-color .4s ease-in-out}.footer p{margin:0}.footer p+p{margin-top:6px}.footer a{color:var(--page-color);font-weight:500;text-decoration:none;transition:color .4s ease-in-out}.footer a:hover{text-decoration:underline}