:root{font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:#1e293b;--primary: #4f46e5;--primary-hover: #4338ca;--bg-color: #f8fafc;--card-bg: #ffffff}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-color);background-image:radial-gradient(at 0% 0%,rgba(199,210,254,.5) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(224,231,255,.5) 0px,transparent 50%);background-attachment:fixed}#root{width:100%}.app-container{display:flex;flex-direction:column;min-height:100vh}.app-header{padding:1.5rem 2rem;display:flex;justify-content:center}.app-header h1{font-size:1.5rem;font-weight:700;color:#1e293b;letter-spacing:-.025em;margin:0}.app-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem 4rem;box-sizing:border-box}.home-container{display:flex;flex-direction:column;gap:3rem;width:100%}.main-grid{display:flex;flex-direction:column;gap:2rem;width:100%}@media(min-width:1024px){.main-grid{display:grid;grid-template-columns:1.5fr 1fr;align-items:start;gap:3rem}}.config-column{display:flex;flex-direction:column;gap:2rem}.preview-column{width:100%}.card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;border:1px solid rgba(255,255,255,.5)}.content-page{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 6px -1px #0000001a;max-width:800px;margin:0 auto}.segmented-control{display:flex;background-color:#e2e8f0;padding:.25rem;border-radius:12px;gap:.25rem}.segmented-control button{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border:none;background:transparent;border-radius:8px;font-weight:600;color:#64748b;cursor:pointer;transition:all .2s ease;font-family:inherit}.segmented-control button.active{background-color:#fff;color:var(--primary);box-shadow:0 1px 3px #0000001a}.segmented-control button:hover:not(.active){color:#334155}.input-group{display:flex;flex-direction:column;gap:1.5rem}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.875rem;font-weight:600;color:#475569}input[type=text],input[type=url],input[type=email],input[type=password],input[type=tel],select{width:100%;padding:.875rem 1rem;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;font-size:1rem;color:#1e293b;outline:none;transition:all .2s;box-sizing:border-box;font-family:inherit}input:focus,select:focus{border-color:var(--primary);background-color:#fff;box-shadow:0 0 0 4px #4f46e51a}.styling-card h3{margin-top:0;margin-bottom:1.5rem;font-size:1.125rem;display:flex;align-items:center;gap:.5rem}.styling-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media(min-width:640px){.styling-grid{grid-template-columns:1fr 1fr}}.button-group{display:flex;gap:.5rem}.button-group button{flex:1;padding:.5rem;border:1px solid #e2e8f0;background:#fff;border-radius:8px;cursor:pointer;font-size:.875rem;color:#64748b;transition:all .2s;font-family:inherit;font-weight:500}.button-group button.active{background:#eff6ff;border-color:var(--primary);color:var(--primary)}.color-picker-wrapper{display:flex;align-items:center;gap:1rem}input[type=color]{-webkit-appearance:none;border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;padding:0;overflow:hidden;background:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid #e2e8f0;border-radius:50%}.color-value{font-family:monospace;color:#64748b}.file-input-wrapper{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border:1px dashed #cbd5e1;border-radius:.75rem;color:#64748b;cursor:pointer;transition:all .2s;background:#f8fafc;font-size:.875rem;font-weight:500}.file-input-wrapper:hover{border-color:var(--primary);color:var(--primary);background:#eef2ff}.file-input-wrapper input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.remove-logo{margin-top:.5rem;font-size:.75rem;color:#ef4444;background:none;border:none;padding:0;cursor:pointer}.sticky-preview{position:sticky;top:2rem;display:flex;flex-direction:column;align-items:center;gap:2rem;background:#fff}.qr-wrapper{background:#fff;padding:1rem;border-radius:12px}.qr-wrapper canvas{max-width:100%;height:auto}.action-buttons{display:flex;flex-direction:column;gap:1rem;width:100%}.btn-primary{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:var(--primary);color:#fff;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s;font-size:1rem;font-family:inherit;box-shadow:0 4px 6px -1px #4f46e566}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 10px 15px -3px #4f46e580}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:#fff;color:#475569;border:1px solid #e2e8f0;border-radius:12px;font-weight:600;cursor:pointer;transition:all .2s;font-size:1rem;font-family:inherit}.btn-secondary:hover{background:#f8fafc;color:#1e293b;border-color:#cbd5e1}.app-footer{width:100%;padding:2rem;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;gap:1rem;background:#ffffff80}.app-footer nav{display:flex;gap:2rem}.app-footer a{color:#64748b;text-decoration:none;font-weight:500;transition:color .2s}.app-footer a:hover{color:var(--primary)}.app-footer p{color:#94a3b8;font-size:.875rem;margin:0}.feature-highlights{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;width:100%;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #f1f5f9;flex-wrap:wrap}.feature-item{display:flex;flex-direction:row;align-items:center;gap:.35rem;font-size:.75rem;color:#64748b;font-weight:500;white-space:nowrap}.feature-item svg{color:#94a3b8}