:root{color-scheme:light;--ink: #111812;--muted: #5d675f;--line: #d8ddd1;--paper: #fbfaf6;--surface: #ffffff;--surface-strong: #eef4ed;--accent: #2f6f52;--accent-strong: #1f533b;--accent-soft: #dceadf;--warning: #9b4215;--shadow: 0 18px 50px rgba(30, 49, 41, .12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--paper)}body{margin:0;color:var(--ink);background:linear-gradient(180deg,#dceadfdb,#fbfaf600 390px),var(--paper)}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem .85rem;font-weight:700}button:hover{border-color:var(--accent);color:var(--accent-strong)}button:disabled{cursor:not-allowed;opacity:.5}button svg{flex:0 0 auto;width:1.05rem;height:1.05rem;stroke-width:2.2}button span{min-width:0;white-space:nowrap}.page-shell{min-height:100vh}.hero{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:44px 0 32px}.hero-copy{max-width:860px;margin-bottom:24px}.hero h1{margin:0;font-size:clamp(2.25rem,6vw,4.8rem);line-height:.98;letter-spacing:0}.hero-copy p:last-child{max-width:720px;margin:1rem 0 0;color:var(--muted);font-size:1.1rem;line-height:1.6}.eyebrow{margin:0 0 .45rem;color:var(--accent-strong);font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase}.qr-tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);grid-template-areas:"data preview" "settings preview" "logo preview";gap:14px;align-items:start}.panel,.preview-area{border:1px solid var(--line);border-radius:8px;background:#ffffffeb;box-shadow:var(--shadow)}.panel{padding:18px}.data-panel{grid-area:data}.controls-panel{grid-area:settings}.logo-panel{grid-area:logo}.panel-heading,.preview-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:14px}h2,h3,p{letter-spacing:0}.panel h2,.preview-header h2,.content-inner h2{margin:0;font-size:1.35rem;line-height:1.2}.icon-button{width:44px;padding:0}.field{display:grid;gap:.45rem;min-width:0}.field span,.check-field span,.switch span{color:var(--muted);font-size:.88rem;font-weight:750}.field input,.field select,.field textarea{width:100%;min-width:0;border:1px solid #cbd6ca;border-radius:8px;background-color:#fffffff0;color:var(--ink);padding:.72rem .78rem;box-shadow:inset 0 1px #ffffffd9;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.field input:hover,.field select:hover,.field textarea:hover{border-color:#aebfad;background-color:#fff}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2f6f5226,inset 0 1px #ffffffe6;outline:none}.field input:disabled,.field select:disabled,.field textarea:disabled{background-color:#eef2eb;color:#7d887f;cursor:not-allowed}.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232f6f52' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .78rem center;background-repeat:no-repeat;background-size:1.1rem;padding-right:2.7rem}.field select option{background:var(--surface);color:var(--ink)}.field input[type=file]{padding:.48rem}.field input[type=file]::file-selector-button{border:1px solid var(--line);border-radius:7px;background:var(--accent-soft);color:var(--accent-strong);cursor:pointer;font-weight:750;margin-right:.7rem;padding:.48rem .68rem}.field textarea{resize:vertical;min-height:132px;line-height:1.5}.field input[type=color]{height:46px;padding:.25rem}.field input[type=range]{accent-color:var(--accent);padding-inline:0}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field-wide{grid-column:1 / -1}.color-field{grid-template-columns:1fr auto;align-items:center}.color-field input{width:72px}.switch,.check-field{display:inline-flex;align-items:center;gap:.55rem}.switch input,.check-field input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}.preview-area{grid-area:preview;position:sticky;top:16px;padding:18px}.status{min-height:1.2rem;margin:0;color:var(--warning);font-size:.86rem;font-weight:750;text-align:right}.qr-preview{display:grid;place-items:center;width:100%;aspect-ratio:1;border:1px dashed var(--line);border-radius:8px;background:linear-gradient(45deg,rgba(17,24,18,.04) 25%,transparent 25%),linear-gradient(-45deg,rgba(17,24,18,.04) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(17,24,18,.04) 75%),linear-gradient(-45deg,transparent 75%,rgba(17,24,18,.04) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;overflow:hidden}.qr-preview canvas,.qr-preview svg{display:block;width:min(100%,380px)!important;height:auto!important;max-width:100%;max-height:100%}.action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.primary-button{grid-column:1 / -1;background:var(--accent);border-color:var(--accent);color:#fff}.primary-button:hover{background:var(--accent-strong);color:#fff}.content-band{border-top:1px solid var(--line);background:var(--surface)}.faq-band{background:var(--surface-strong)}.content-inner{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0}.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}.article-grid article{border:1px solid var(--line);border-radius:8px;padding:18px}.article-grid h3,.faq-list summary{margin:0;font-size:1.05rem}.article-grid p,.faq-list p{margin:.7rem 0 0;color:var(--muted);line-height:1.6}.faq-list{display:grid;gap:10px;margin-top:18px}.faq-list details{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:16px 18px}.faq-list summary{cursor:pointer;font-weight:800}code{background:#11181214;border-radius:5px;padding:.08rem .3rem}@media(max-width:940px){.qr-tool{grid-template-columns:1fr;grid-template-areas:"data" "preview" "settings" "logo"}.preview-area{position:static}.article-grid{grid-template-columns:1fr}}@media(max-width:620px){.hero{width:min(100% - 20px,1180px);padding-top:26px}.action-row{grid-template-columns:1fr}.primary-button{grid-column:auto}.panel,.preview-area{padding:14px}.panel-heading,.preview-header{align-items:flex-start}.content-inner{width:min(100% - 20px,1180px)}}@media(max-width:359px){.control-grid{grid-template-columns:1fr}}
