:root{--color-bg-main: #0f172a;--color-bg-secondary: #1e293b;--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-accent: #f43f5e;--color-text-main: #f8fafc;--color-text-muted: #94a3b8;--color-border: #334155;--glass-bg: rgba(30, 41, 59, .7);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--font-family: "Inter", system-ui, -apple-system, sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--transition-fast: .2s ease;--transition-normal: .3s ease}body{background-color:var(--color-bg-main);color:var(--color-text-main);font-family:var(--font-family);margin:0;min-height:100vh;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}button{font-family:inherit;cursor:pointer;border:none;background:none}a{text-decoration:none;color:inherit}.tool-tabs{display:flex;margin-bottom:1rem;background:#0003;padding:4px;border-radius:.5rem;gap:4px}.hero-title{font-size:3rem}.hero-subtitle{margin-bottom:2rem;margin-top:0}.tab-btn{flex:1;padding:.5rem;border-radius:.25rem;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:500;transition:var(--transition-fast)}.tab-btn:hover{background:#ffffff0d;color:var(--color-text-main)}.tab-btn.active{background:var(--color-bg-secondary);color:var(--color-text-main);box-shadow:0 1px 3px #0000001a}.app-container-center{max-width:600px;margin:4rem auto;text-align:center;padding:0 var(--spacing-md)}.hero-title{margin-bottom:.5rem;font-size:4.5rem;background:linear-gradient(135deg,#a5b4fc,#6366f1,#f43f5e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;letter-spacing:-2px;line-height:1.1;text-shadow:0 10px 30px rgba(99,102,241,.2)}.hero-subtitle{color:var(--color-text-muted);font-size:1.25rem;margin-bottom:3rem;max-width:80%;margin-left:auto;margin-right:auto;line-height:1.6}.primary-btn{padding:.8rem 2rem;border-radius:.5rem;border:none;background:linear-gradient(135deg,#6366f1,#f43f5e);color:#fff;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #6366f166}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6366f199}.secondary-btn{padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#ccc;font-weight:500;cursor:pointer;transition:all .2s}.secondary-btn:hover{background:#ffffff1a;color:#fff;border-color:#ffffff4d;transform:translateY(-2px)}.hero-actions{margin-top:2rem;display:flex;justify-content:center;gap:1.5rem}.workspace-grid{display:grid;grid-template-columns:1fr 350px;gap:2rem;align-items:start}.workspace-left{display:flex;flex-direction:column;gap:1.5rem}.workspace-right{position:sticky;top:100px}.picker-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-sm)}.color-indicator-pill{display:flex;align-items:center;gap:.5rem;background:#0000004d;padding:.5rem 1rem;border-radius:2rem}@media(max-width:900px){.workspace-grid{grid-template-columns:1fr}.workspace-right{position:static;order:2}.app-heading-gradient{font-size:2rem}}.layout-container{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at top right,#1e293b,#0f172a)}.layout-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172a99;position:sticky;top:0;z-index:10}.logo{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary);letter-spacing:-.02em}.layout-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.layout-footer{text-align:center;padding:var(--spacing-md);color:var(--color-text-muted);font-size:var(--font-size-sm);border-top:1px solid var(--glass-border)}@media(max-width:768px){.layout-content{padding:var(--spacing-md)}}.uploader-container{border:2px dashed var(--color-border);border-radius:1rem;padding:var(--spacing-xl);text-align:center;transition:var(--transition-normal);background:#1e293b4d;cursor:pointer;min-height:250px;display:flex;align-items:center;justify-content:center}.uploader-container:hover,.uploader-container.dragging{border-color:var(--color-primary);background:#6366f11a}.uploader-label{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);width:100%}.icon-wrapper{color:var(--color-text-muted);transition:var(--transition-fast)}.uploader-container:hover .icon-wrapper{color:var(--color-primary);transform:scale(1.1)}.text-wrapper{display:flex;flex-direction:column;gap:var(--spacing-xs);color:var(--color-text-muted)}.primary-text{color:var(--color-primary);font-weight:600}.secondary-text{font-size:var(--font-size-sm);opacity:.7}.picker-wrapper{position:relative;width:100%;overflow:hidden;border-radius:1rem;box-shadow:var(--glass-shadow);background:var(--color-bg-secondary);display:flex;justify-content:center;align-items:center;cursor:crosshair}.image-canvas{width:100%;height:auto;display:block}.magnifier{position:absolute;width:100px;height:100px;border-radius:50%;top:10px;right:10px;margin:0;transform:none;background-color:var(--color-bg-secondary);border:4px solid var(--glass-border);z-index:10;display:flex;align-items:center;justify-content:center;overflow:hidden}.magnifier-ring{position:absolute;width:90%;height:90%;border-radius:50%;border:1px solid rgba(0,0,0,.2)}.crosshair{width:10px;height:10px;border:1px solid rgba(255,255,255,.8);background-color:transparent;z-index:11}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#ffffff80}.palette-container{margin-top:var(--spacing-lg);width:100%}.palette-container h3{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md);color:var(--color-text-main);font-weight:500}.swatch-grid{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.swatch-btn{flex:1;min-width:80px;height:60px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:600;transition:transform var(--transition-fast),box-shadow var(--transition-fast);box-shadow:0 4px 6px -1px #0000001a}.swatch-btn:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.swatch-label{opacity:0;transform:translateY(5px);transition:var(--transition-normal)}.swatch-btn:hover .swatch-label{opacity:1;transform:translateY(0)}.export-btn{color:var(--color-text-muted);opacity:.7;padding:4px;border-radius:4px;transition:var(--transition-fast);display:flex;border:1px solid transparent}.export-btn:hover{opacity:1;background:#ffffff1a;color:var(--color-text-main);border-color:var(--glass-border)}.converter-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:1rem;padding:var(--spacing-lg);display:grid;grid-template-columns:100px 1fr;gap:var(--spacing-lg);align-items:center;width:100%;margin-top:var(--spacing-lg)}.color-preview-wrapper{display:flex;flex-direction:column;align-items:center;gap:.5rem}.color-preview{width:80px;height:80px;border-radius:50%;border:4px solid var(--glass-border);box-shadow:var(--glass-shadow);position:relative;overflow:hidden;transition:transform var(--transition-fast)}.color-preview:hover{transform:scale(1.05);border-color:var(--color-primary)}.color-input-hidden{opacity:0;width:100%;height:100%;cursor:pointer;position:absolute;top:0;left:0}.edit-hint{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--color-text-muted);font-weight:500;pointer-events:none}.formats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--spacing-md);width:100%}.format-item{display:flex;flex-direction:column;gap:.25rem}.format-label{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:500}.input-group{display:flex;align-items:center;background:#0003;border-radius:.5rem;padding:.25rem;border:1px solid var(--glass-border);transition:var(--transition-fast)}.input-group:focus-within{border-color:var(--color-primary);background:#0006}.input-group input{background:none;border:none;color:var(--color-text-main);flex:1;padding:.5rem;font-family:monospace;width:100%}.input-group input:focus{outline:none}.copy-btn{padding:.5rem;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:var(--transition-fast)}.copy-btn:hover{background:#ffffff1a;color:var(--color-text-main)}.copy-btn.copied{color:#10b981}@media(max-width:600px){.converter-panel{grid-template-columns:1fr;justify-items:center;text-align:center}}.history-container{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--glass-border)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs)}.history-header h3{font-size:var(--font-size-base);color:var(--color-text-muted);font-weight:500}.clear-btn{font-size:var(--font-size-sm);color:var(--color-text-muted);opacity:.7}.clear-btn:hover{opacity:1;color:var(--color-accent)}.history-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.history-swatch{width:24px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:transform var(--transition-fast)}.history-swatch:hover{transform:scale(1.2);z-index:1;box-shadow:0 2px 4px #0000004d}.snippet-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:1rem;padding:var(--spacing-lg);margin-top:var(--spacing-lg)}.snippet-panel h3{margin-top:0;margin-bottom:var(--spacing-md);font-size:var(--font-size-base);color:var(--color-text-muted)}.controls-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.controls-grid label{flex:1;min-width:120px}.controls-grid label{display:flex;flex-direction:column;gap:.25rem;font-size:var(--font-size-sm);color:var(--color-text-muted)}.controls-grid select{appearance:none;background-color:#0003;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:1rem;border:1px solid var(--glass-border);color:var(--color-text-main);padding:.6rem 2rem .6rem .8rem;border-radius:.5rem;cursor:pointer;font-size:.9rem;transition:all .2s ease}.controls-grid select:hover{background-color:#ffffff0d;border-color:#ffffff4d}.controls-grid select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #6366f133}.code-display{background:#0006;padding:1rem;border-radius:.5rem;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--glass-border)}.code-display code{font-family:monospace;color:var(--color-text-main);word-break:break-all}.copy-btn-large{background:var(--color-primary);color:#fff;padding:.5rem 1rem;border-radius:.5rem;font-size:var(--font-size-sm);font-weight:500;transition:var(--transition-fast);white-space:nowrap;margin-left:1rem}.copy-btn-large:hover{background:var(--color-primary-hover)}.copy-btn-large.copied{background:#10b981}@media(max-width:500px){.controls-grid{grid-template-columns:1fr}.code-display{flex-direction:column;gap:1rem;align-items:stretch;text-align:center}.copy-btn-large{margin-left:0}}.suggestions-container{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:1rem;padding:var(--spacing-lg);margin-top:var(--spacing-lg);animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.suggestion-section{margin-bottom:var(--spacing-md)}.suggestion-section h4{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:.5rem;font-weight:500}.suggestion-row{display:flex;gap:.5rem}.suggestion-swatch{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.1);cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.suggestion-swatch:hover{transform:scale(1.15) translateY(-2px);border-color:#fff;box-shadow:0 5px 15px #0003;z-index:2}.suggestion-swatch:active{transform:scale(.95)}.accent-swatch{width:100%;border-radius:8px}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-out}.modal-content{background:#1e1e24;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px #0006;width:90%;max-width:600px;border-radius:1rem;padding:2rem;position:relative;animation:scaleUp .3s cubic-bezier(.175,.885,.32,1.275);display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.modal-header h2{margin:0;font-size:1.5rem;background:linear-gradient(to right,#fff,#aaa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.close-btn{background:none;border:none;color:#aaa;font-size:2rem;line-height:1;cursor:pointer;transition:color .2s;padding:0}.close-btn:hover{color:#fff}.modal-tabs{display:flex;gap:1rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1.5rem}.modal-tab{background:none;border:none;color:#888;padding:.5rem 0;cursor:pointer;font-size:1rem;font-weight:500;position:relative;transition:color .3s}.modal-tab:hover{color:#ccc}.modal-tab.active{color:var(--color-primary)}.modal-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--color-primary)}.modal-body{flex:1;min-height:200px}.tab-pane{animation:fadeIn .3s ease}.tab-pane p{color:#ccc;line-height:1.6;margin-bottom:1rem;text-align:left}.feature-list,.usage-list{list-style:none;padding:0;margin:0;text-align:left}.feature-list li{margin-bottom:1rem;display:flex;flex-direction:column;gap:.2rem}.feature-list strong{color:#fff;display:flex;align-items:center;gap:.5rem}.feature-list span{color:#888;font-size:.9rem;padding-left:0}.usage-list li{margin-bottom:.8rem;color:#ccc;counter-increment:list-item;padding-left:1.5rem;position:relative}.usage-list li:before{content:counter(list-item) ".";color:var(--color-primary);font-weight:700;position:absolute;left:0}.modal-footer{margin-top:1rem;text-align:right;border-top:1px solid rgba(255,255,255,.05);padding-top:1rem}.version-tag{background:#ffffff0d;padding:.2rem .6rem;border-radius:4px;font-size:.8rem;color:#888;font-family:monospace}.contact-card{background:#1e1e24;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px #0006;width:90%;max-width:800px;border-radius:1.5rem;padding:2.5rem;position:relative;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275);text-align:center;max-height:90vh;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.contact-close-btn{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:#666;font-size:2rem;line-height:1;cursor:pointer;transition:color .2s;z-index:2}.contact-close-btn:hover{color:#fff}.contact-header h3{font-size:2rem;margin-bottom:.5rem;background:linear-gradient(to right,#6366f1,#f43f5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.contact-header p{color:#aaa;margin-bottom:2rem}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}.contact-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem 1rem;border-radius:1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.05);text-decoration:none;transition:all .3s ease;gap:.8rem;min-height:140px}.contact-item .icon{display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem}.contact-item .icon svg{width:32px;height:32px;stroke-width:1.5}.contact-item .label{color:#fff;font-weight:600;font-size:1rem}.contact-item .username{color:#888;font-size:.8rem;word-break:break-all;opacity:.8;transition:opacity .2s}.contact-item:hover{transform:translateY(-5px);background:#ffffff14}.contact-item:hover .username{opacity:1;color:#fff}.contact-item.instagram:hover{border-color:#e1306c;box-shadow:0 8px 20px -5px #e1306c4d;color:#e1306c}.contact-item.instagram:hover .icon{color:#e1306c}.contact-item.facebook:hover{border-color:#1877f2;box-shadow:0 8px 20px -5px #1877f24d}.contact-item.facebook:hover .icon{color:#1877f2}.contact-item.github:hover{border-color:#9c7ddb;box-shadow:0 8px 20px -5px #6e54944d}.contact-item.github:hover .icon{color:#9c7ddb}.contact-item.youtube:hover{border-color:red;box-shadow:0 8px 20px -5px #ff00004d}.contact-item.youtube:hover .icon{color:red}.contact-item.whatsapp:hover{border-color:#25d366;box-shadow:0 8px 20px -5px #25d3664d}.contact-item.whatsapp:hover .icon{color:#25d366}.contact-item.email:hover{border-color:#ffd43b;box-shadow:0 8px 20px -5px #ffd43b4d}.contact-item.email:hover .icon{color:#ffd43b}.contact-footer p{color:#555;font-size:.9rem;font-style:italic}@media(max-width:768px){.contact-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.contact-item{padding:1rem;min-height:120px}}@media(max-width:480px){.contact-grid{grid-template-columns:1fr;gap:.8rem}.contact-card{padding:1.5rem;width:95%}.contact-header h3{font-size:1.5rem}.contact-item{flex-direction:row;justify-content:flex-start;padding:1rem;min-height:auto;text-align:left}.contact-item .icon{margin-right:1rem}.contact-item .icon svg{width:24px;height:24px}.contact-item .label{font-size:.9rem;margin-right:auto}.contact-item .username{display:none}}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);padding:.8rem 1.5rem;border-radius:50px;background:#1e1e24e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:.9rem;font-weight:500;box-shadow:0 10px 30px #00000080;z-index:9999;animation:toastUp .3s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;gap:.5rem}.toast-success{border-bottom:2px solid #10b981}.toast-error{border-bottom:2px solid #ef4444}.toast-info{border-bottom:2px solid #3b82f6}@keyframes toastUp{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}.context-menu-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9998}.context-menu{position:absolute;background:#1e1e24f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.6rem;box-shadow:0 20px 50px #0009,0 0 0 1px #ffffff0d;z-index:9999;min-width:220px;animation:scaleIn .15s cubic-bezier(.2,0,.13,1.5);transform-origin:top left}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.menu-item{padding:.7rem 1rem;display:flex;align-items:center;gap:1rem;color:#e0e0e0;font-size:.95rem;font-weight:500;cursor:pointer;border-radius:8px;transition:all .2s;-webkit-user-select:none;user-select:none}.menu-item:hover{background:#ffffff1a;color:#fff;transform:translate(2px)}.menu-item span.icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#818cf8}.menu-item svg{width:18px;height:18px;stroke-width:2}.menu-divider{height:1px;background:#ffffff14;margin:.5rem}.menu-item.danger,.menu-item.danger .icon{color:#f87171}.menu-item.danger:hover{background:#f871711a;color:#fca5a5}