:root{--bg-main:rgba(15, 23, 42, 0.85);--bg-card:rgba(30, 41, 59, 0.95);--border-color:#334155;--text-main:#f8fafc;--text-muted:#94a3b8;--primary:#ec4899;--hover-bg:rgba(51, 65, 85, 0.8);--font-mono:'JetBrains Mono', 'Fira Code', 'Courier New', monospace}.gradient-preview-layer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-2;transition:background 0.3s}.grain-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 0.3s;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");mix-blend-mode:overlay}.gradient-app-wrapper{position:relative;max-width:1200px;margin:0 auto;font-family:'Inter',system-ui,sans-serif;color:var(--text-main);padding:1.5rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;text-shadow:0 2px 4px rgb(0 0 0 / .5)}.font-bold{font-weight:700}.text-muted{color:#cbd5e1;text-shadow:0 1px 2px rgb(0 0 0 / .5)}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.flex-between{display:flex;justify-content:space-between;align-items:center}.divider{height:1px;background:var(--border-color);margin:1.5rem 0}.app-layout{display:flex;flex-direction:column;gap:1.5rem}@media (min-width:992px){.app-layout{flex-direction:row;align-items:flex-start}.control-panel{flex:1;max-width:400px;position:sticky;top:1.5rem}.code-panel{flex:2}}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;box-shadow:0 10px 15px -3px rgb(0 0 0 / .3);backdrop-filter:blur(10px)}.form-group label{display:block;font-size:.85rem;font-weight:600;color:#e2e8f0;margin-bottom:.5rem}.form-control{width:100%;background:rgb(15 23 42 / .8);border:1px solid var(--border-color);color:#fff;padding:.5rem .75rem;border-radius:.5rem;font-size:.95rem;outline:none;transition:all 0.2s}.form-control:focus{border-color:var(--primary)}.form-range{width:100%;accent-color:var(--primary)}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem}.checkbox-label input{width:16px;height:16px;accent-color:var(--primary)}.color-list{display:flex;flex-direction:column;gap:.5rem}.color-item{display:flex;align-items:center;gap:.5rem;background:rgb(15 23 42 / .5);padding:.4rem;border-radius:.5rem;border:1px solid var(--border-color)}.color-picker{width:30px;height:30px;padding:0;border:none;border-radius:4px;cursor:pointer;background:none}.color-hex{flex:1;background:#fff0;border:none;color:#fff;font-family:var(--font-mono);font-size:.9rem;outline:none;text-transform:uppercase}.btn-remove{background:#fff0;border:none;color:#ef4444;cursor:pointer;padding:.25rem;display:flex;align-items:center;border-radius:.25rem}.btn-remove:hover{background:rgb(239 68 68 / .2)}.btn-remove i{width:14px;height:14px}.btn{padding:.5rem 1rem;border-radius:.5rem;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;display:inline-flex;align-items:center;gap:.5rem}.btn-sm{padding:.3rem .6rem;font-size:.85rem}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#db2777}.btn-outline{background:#fff0;border:1px solid var(--border-color);color:var(--text-main)}.btn-outline:hover{background:var(--hover-bg)}.code-card{height:100%;display:flex;flex-direction:column}.code-card pre{background:rgb(15 23 42 / .9);padding:1rem;border-radius:.5rem;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;color:#a5b4fc;line-height:1.5;flex:1;margin:0;border:1px solid var(--border-color)}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--primary);color:#fff;padding:.75rem 1.5rem;border-radius:2rem;font-weight:600;opacity:0;transition:all 0.3s cubic-bezier(.68,-.55,.265,1.55);z-index:1000}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}