:root{font-family:Tahoma,Arial,sans-serif;color:#111827;background:#f4f5f9;font-synthesis:none;--blue:#3d57eb;--muted:#6b7280}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;transition:background .15s,transform .15s}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #9aa9ff;outline-offset:3px}button,a,input{touch-action:manipulation}h1,h2,h3,p{margin:0}h2{font-size:18px;font-weight:900}h3{font-size:16px}.app{max-width:1140px;margin:auto}.header{padding:27px 24px 21px;display:flex;justify-content:space-between;align-items:baseline}.header h1{font-size:27px;font-weight:900;letter-spacing:-1px}.header p{font-size:14px;color:var(--muted);font-weight:700}main{padding:0 24px 112px;min-height:calc(100dvh - 90px)}.types{display:flex;gap:8px;overflow:auto;padding:1px 0 16px;scrollbar-width:thin}.type{flex:1;min-width:70px;height:68px;border-radius:17px;background:white;border:1px solid #e6e8ef;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:#4b5563;font-size:12px;font-weight:800}.type .symbol{font-size:20px}.type.active{background:var(--blue);color:white;border-color:var(--blue)}.creator{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:start}.preview{grid-column:2;grid-row:1 / span 3;padding:30px;background:white;border-radius:26px;box-shadow:0 8px 24px #11182706;position:sticky;top:20px;text-align:center}.preview svg{display:block;width:min(100%,292px);height:auto;margin:auto}.preview-hint{font-size:12px;color:var(--muted);margin-top:20px;line-height:1.8}.card{background:white;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}.data{grid-column:1;grid-row:1}.design{grid-column:1;grid-row:2}.export{grid-column:2;grid-row:4}.design{grid-row:2 / span 3}.input-group{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}.label,label{font-size:14px;color:#374151;font-weight:700}input:not([type=checkbox],[type=file],[type=color]),textarea,select{width:100%;border:1px solid transparent;background:#f1f3f7;border-radius:12px;min-height:49px;padding:12px;color:#111827;font-size:15px}textarea{resize:vertical;min-height:90px;max-height:180px}input::placeholder,textarea::placeholder{color:#9ca3af}input.hex{width:115px!important;min-height:40px!important;font-weight:700;font-size:13px!important;padding:9px!important}.options{display:flex;gap:7px;flex-wrap:wrap}.option{flex:1;min-width:68px;padding:11px 9px;border-radius:11px;background:#f1f3f7;color:#4b5563;font-weight:700;font-size:12px}.option.active{background:var(--blue);color:white}.swatches{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.swatch{width:34px;height:34px;border:3px solid transparent;border-radius:50%}.swatch.active{border-color:#b9c3ff;outline:1px solid #b9c3ff}.color-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.switch-row{display:flex;justify-content:space-between;align-items:center}.switch{appearance:none;width:45px;height:27px;border-radius:18px;background:#d5d8e1;cursor:pointer;position:relative;margin:0}.switch:before{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .15s}.switch:checked{background:var(--blue)}.switch:checked:before{transform:translateX(18px)}.primary,.secondary{padding:15px;border-radius:14px;font-size:14px;font-weight:800;text-align:center}.primary{background:var(--blue);color:white}.secondary{background:#eef0ff;color:#3348cf}.reset{padding:5px;background:none;color:var(--muted);font-size:13px;font-weight:700}.actions{display:flex;gap:10px}.actions>*{flex:1}.tabs{position:fixed;bottom:0;left:0;right:0;z-index:5;display:flex;background:#ffffffef;backdrop-filter:blur(15px);border-top:1px solid #e5e7eb;justify-content:center;padding:9px max(8px,calc((100% - 1080px)/2)) calc(9px + env(safe-area-inset-bottom));gap:4px}.tabs button{flex:1;min-height:48px;max-width:270px;border-radius:12px;background:none;color:#7b8190;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;font-size:11px;font-weight:700}.tabs button.active{color:var(--blue);background:#eef0ff80}.tab-icon{font-size:24px;line-height:27px;position:relative}.tab-icon b{position:absolute;right:-15px;top:-3px;background:#ef4444;color:#fff;border-radius:12px;min-width:18px;line-height:18px;font-size:10px;padding:0 3px}.center{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;min-height:50vh;padding:28px}.center-icon{font-size:60px;color:var(--blue)}.center h2{font-size:21px}.center p{color:var(--muted);font-size:14px;line-height:1.8;max-width:340px}.history-header{display:flex;align-items:center;justify-content:space-between;margin:8px 0 20px;gap:10px}.filters{display:flex;background:#e9ebf2;border-radius:11px;padding:3px}.filters button{padding:8px 15px;border-radius:9px;background:none;font-size:12px;font-weight:700;color:var(--muted)}.filters button.active{background:#fff;color:var(--blue)}.history-list{display:grid;gap:10px}.history-item{background:#fff;border-radius:17px;padding:18px;display:flex;gap:15px}.history-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}.history-value{direction:ltr;text-align:left;color:#4b5563;word-break:break-word;white-space:pre-wrap;font-size:14px;max-height:72px;overflow:auto}.date{font-size:11px;color:#9ca3af}.history-actions{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.star{background:none;font-size:26px;color:#d1d5db}.star.on{color:#f3b61f}.delete{color:#d52828;font-size:12px;background:none}.scan{max-width:640px;margin:auto;display:flex;flex-direction:column;gap:16px}.camera{height:430px;background:#111827;position:relative;overflow:hidden;border-radius:28px;display:flex;align-items:center;justify-content:center}.camera video{width:100%;height:100%;object-fit:cover}.guide{position:absolute;width:230px;height:230px;border:4px solid white;border-radius:24px;pointer-events:none}.hint{text-align:center;color:var(--muted);font-size:14px;line-height:1.8}.result-value{direction:ltr;text-align:left;background:#f1f3f7;padding:12px;border-radius:12px;white-space:pre-wrap;word-break:break-word;max-height:250px;overflow:auto}.success{color:#169b62}.pro{max-width:470px;margin:auto;display:flex;align-items:center;flex-direction:column;gap:20px;padding:26px 0}.pro-icon{width:88px;height:88px;border-radius:25px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:30px;font-weight:900}.pro h2{font-size:30px}.pro .hint{max-width:330px}.features{width:100%;gap:20px}.feature{display:flex;align-items:center;gap:11px;font-size:14px;line-height:1.7}.check{background:#18a66a;border-radius:50%;color:white;min-width:25px;line-height:25px;text-align:center}.notice{background:#eef0ff;padding:16px;border-radius:14px;color:#3348cf;text-align:center;line-height:1.8;font-size:13px}.error{color:#b42318;background:#fff2f0;border-radius:10px;padding:10px;font-size:13px;line-height:1.7}.error:empty{display:none}.logo-row{display:flex;align-items:center;gap:10px}.logo-row .secondary{flex:1}.logo-thumb{width:36px;height:36px;object-fit:contain}.hidden,[hidden]{display:none!important}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);z-index:10;max-width:calc(100% - 32px);width:max-content;background:#111827;color:#fff;padding:14px 22px;border-radius:14px;box-shadow:0 8px 24px #0002;opacity:0;pointer-events:none;transition:opacity .15s;text-align:center;font-size:14px;line-height:1.6}#toast.show{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}.privacy-note{color:#9ca3af;font-size:11px;text-align:center;line-height:1.8}.preview.transparent #qr{background:repeating-conic-gradient(#eef0f5 0% 25%,white 0% 50%) 50% / 16px 16px;border-radius:14px}.scan-loading{padding:60px;text-align:center}.text-link{color:var(--blue);background:none;text-decoration:underline;font-size:12px}
@media(min-width:760px){.creator{grid-template-rows:auto auto auto auto}.preview{grid-row:1 / span 2}.export{grid-row:3}.design{grid-row:2 / span 3}.history-list{grid-template-columns:1fr 1fr}}
@media(max-width:759px){.app{max-width:540px}.header{padding:18px 20px 16px}.header p{font-size:12px}main{padding:0 16px 105px}.creator{display:flex;flex-direction:column;gap:14px}.creator>*{width:100%}.preview{order:0;position:static;padding:18px}.preview-hint{margin-top:10px}.data{order:1}.design{order:2}.export{order:3}.card{padding:16px}.type{flex:0 0 70px}.types{padding-bottom:14px}.swatches{gap:9px}.tabs button.active{background:none}.history-header h2{font-size:16px}.history-item{padding:15px}.camera{height:400px}.pro{padding:18px 8px}.header h1{font-size:27px}.color-row{gap:10px}.preview svg{max-width:292px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.site-footer{padding:0 24px 100px}.site-intro{color:#6b7280;line-height:1.9;font-size:13px;padding:22px 0;border-top:1px solid #e5e7eb}.site-intro h2{color:#374151;font-size:17px;margin-bottom:10px}.site-intro p+p{margin-top:10px}.site-links{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin:20px 0}.site-links a{color:#3348cf;font-size:13px;text-decoration:none}.site-links a:hover{text-decoration:underline}main#main{padding-bottom:32px}.document{max-width:780px;margin:12px auto 28px;padding:32px;line-height:2;min-height:0}.document h1{font-size:27px}.document h2{margin-top:13px}.document p{font-size:15px;color:#374151}.document a,.header>a{color:#3348cf}.header .brand{font-size:27px;font-weight:900;text-decoration:none;color:#111827}.document-footer{padding:0 20px 24px}.ad-block{text-align:center;background:#fff;padding:20px;border-radius:16px;margin:28px 0;min-height:130px}.ad-label{font-size:11px;color:#9ca3af;display:block;margin-bottom:12px}@media(max-width:759px){.site-footer{padding:0 16px 100px}.document{margin:0 16px 20px;padding:22px}.site-links{gap:15px}}