:root{color:#0f172a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at top,#e2e8f0 0%,#f8fafc 45%,#f1f5f9 100%);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:400;line-height:1.4}*{box-sizing:border-box}body{min-height:100vh;margin:0}#root{max-width:1200px;margin:0 auto}.app-shell{box-sizing:border-box;grid-template-columns:minmax(320px,1.2fr) minmax(320px,1fr);gap:24px;min-height:100svh;padding:32px;display:grid}.panel{background:#fff;border:1px solid #d6d8de;border-radius:18px;box-shadow:0 14px 36px #0f172a14}.controls-panel{grid-column:1/2;padding:28px 28px 16px}.header-block h1{margin:0;font-size:clamp(1.6rem,2.2vw,2.2rem)}.header-block p{color:#4b5563;margin:10px 0 0}.controls-grid{grid-column:1/2;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:-6px;padding:24px;display:grid}.controls-grid label{color:#1f2937;flex-direction:column;gap:8px;font-size:.92rem;font-weight:600;display:flex}.controls-grid input,.controls-grid select{border:1px solid #cbd5e1;border-radius:10px;height:42px;padding:0 12px;font-family:inherit;font-size:.95rem}.controls-grid input[type=color]{width:100%;padding:4px}.controls-grid .full-width{grid-column:1/-1}.preview-panel{background:linear-gradient(#f8fafc 0%,#eef2ff 100%);flex-direction:column;grid-column:2/3;justify-content:space-between;gap:20px;padding:24px;display:flex}.qr-frame{text-align:center;background:#fff;border:2px solid #0000;padding:22px;transition:all .2s}.qr-frame.none{border-radius:0}.qr-frame.rounded{border-radius:20px}.qr-frame.card{border-radius:14px;box-shadow:0 15px 25px #0f172a24}.qr-frame.highlight{border-radius:20px;box-shadow:inset 0 0 0 3px #ffffffb3,0 8px 30px #0f172a1f}.qr-frame h2{margin:0 0 12px;font-size:1.1rem}.qr-frame p{color:#4b5563;margin:12px 0 0}.qr-preview{background:#fff;border-style:solid;border-radius:12px;place-items:center;min-height:320px;display:grid;overflow:hidden}.qr-preview canvas,.qr-preview svg{max-width:100%;height:auto}.download-btn{color:#fff;cursor:pointer;background:linear-gradient(120deg,#0f172a,#334155);border:none;border-radius:12px;height:48px;font-size:1rem;font-weight:700}.download-btn:hover{filter:brightness(1.08)}@media (width<=980px){.app-shell{grid-template-columns:1fr;padding:18px}.controls-panel,.controls-grid,.preview-panel{grid-column:1/-1}.controls-grid{grid-template-columns:1fr;margin-top:0}.controls-panel,.controls-grid,.preview-panel{padding:16px}.qr-frame{padding:14px}.qr-preview{min-height:0}.controls-grid .full-width{grid-column:auto}}