*{margin:0;padding:0;box-sizing:border-box}:root{--primary-bg: #ECF0F3;--secondary-bg: #ECF0F3;--text-color: #666;--shadow-light: 12px 12px 24px #D1D9E6;--shadow-dark: -12px -12px 24px #FFFFFF;--shadow-inset-light: inset -12px -12px 24px #FFFFFF;--shadow-inset-dark: inset 12px 12px 24px #D1D9E6;--border-color: rgba(200, 200, 200, .3);--highlight-color: #e2e5ec;--accent-color: #3B82F6;--border-radius: 12px;--section-shadow: inset 12px 12px 24px #D1D9E6, inset -12px -12px 24px #FFFFFF}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes pulse{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}body{font-family:Poppins,sans-serif;background:var(--primary-bg);color:var(--text-color);display:flex;flex-direction:column;align-items:center;min-height:100vh;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(200,200,200,.03)' fill-rule='evenodd'/%3E%3C/svg%3E");z-index:-1}.header{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;color:var(--text-color);padding:1.25rem 2rem;margin-bottom:1.5rem;box-shadow:none;border:none}.header h1{font-family:Poppins,sans-serif;font-size:1.75rem;font-weight:700;margin:0;text-shadow:none;color:#333}.header-controls{display:flex;align-items:center;gap:1rem}#toggle-view-btn{color:var(--text-color);text-decoration:none;font-size:1rem;font-weight:500;padding:.75rem 1.5rem;background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-light),var(--shadow-dark)}#toggle-view-btn:hover{border-color:var(--accent-color);color:var(--accent-color);box-shadow:none}#toggle-view-btn:active{box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark);transform:translateY(1px)}#filter-input{background:var(--primary-bg);font-size:1rem;padding:.75rem 1.25rem;border:1px solid var(--border-color);border-radius:25px;width:250px;outline:none;transition:all .3s ease;box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark)}#filter-input:focus{box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark),0 0 0 2px var(--highlight-color);border-color:var(--accent-color)}#filter-input::placeholder{color:#999;font-style:italic}#icon-list-view{width:90%;max-width:1200px;margin-bottom:3rem}.icon-list-title{color:var(--text-color);font-family:Poppins,sans-serif;font-weight:600;font-size:1.8rem;text-align:center;text-shadow:2px 2px 3px rgba(255,255,255,.5);letter-spacing:1px;position:relative;display:inline-block;left:50%;transform:translate(-50%);margin:2rem 0 64px}.icon-list-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:50px;height:3px;background:var(--text-color);border-radius:3px;box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark)}.icon-list,.inkable-icon-list,.specific-icon-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:3rem;width:100%;background:transparent;border-radius:0;box-shadow:none;padding:0;margin-bottom:2rem}.icon-card{display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--secondary-bg);padding:1.5rem;border-radius:12px;box-shadow:var(--shadow-light),var(--shadow-dark);border:1px solid var(--border-color);cursor:pointer;transition:all .3s ease;text-align:center;position:relative;overflow:visible;color:var(--text-color);font-family:Montserrat,sans-serif;font-weight:400;letter-spacing:.5px;aspect-ratio:1 / 1;width:100%}.icon-card:before{content:none}.icon-card:hover{transform:translateY(-2px) scale(1.03);box-shadow:none}.icon-card:active{transform:translateY(0)}.icon-card svg{height:64px;width:64px;margin-bottom:.5rem;color:var(--text-color);animation:float 6s ease-in-out infinite;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.08));transition:transform .2s ease,color .2s ease}.icon-card:hover svg{color:var(--accent-color);transform:scale(1.05)}#svg-transformer-view{width:90%;max-width:1200px;margin-bottom:3rem}.container{display:flex;flex-direction:column;gap:2rem;width:100%}.comparison-container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;width:100%}.upload-section,.preview-section{background:var(--secondary-bg);border-radius:12px;box-shadow:var(--shadow-light),var(--shadow-dark);border:1px solid var(--border-color);padding:2rem;flex:1;min-width:300px;font-family:Montserrat,sans-serif}h2{font-family:Poppins,sans-serif;color:var(--text-color);margin-bottom:1.5rem;font-size:1.8rem;text-shadow:2px 2px 3px rgba(255,255,255,.5);letter-spacing:1px;position:relative;display:inline-block}h2:after{content:"";position:absolute;bottom:-8px;left:0;width:40px;height:3px;background:var(--border-color);border-radius:3px;box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark)}.upload-area{border:2px dashed var(--border-color);border-radius:12px;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--primary-bg);box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark)}.upload-area:hover{border-color:var(--highlight-color);transform:translateY(-2px)}.upload-area.drag-over{border-color:var(--highlight-color);box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark),0 0 0 2px var(--highlight-color)}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-color)}.upload-placeholder svg{color:var(--text-color);width:48px;height:48px;animation:pulse 3s ease-in-out infinite;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.1))}.upload-placeholder p{font-size:1rem;font-weight:500;margin:0}.upload-placeholder span{font-size:.9rem;opacity:.8}.preview-container{height:300px;border:1px solid var(--border-color);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:all .3s ease;padding:1rem;background:var(--primary-bg);box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark);position:relative;overflow:hidden}.preview-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(145deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 100%);opacity:.5}.preview-placeholder{color:var(--text-color);text-align:center;opacity:.7}.preview-container svg{max-width:80%;max-height:80%;transition:color .3s ease;animation:float 8s ease-in-out infinite;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.1));color:var(--text-color)}.controls{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;background:var(--secondary-bg);color:var(--text-color);border:1px solid var(--border-color);border-radius:30px;cursor:pointer;font-family:Roboto,sans-serif;font-weight:500;transition:all .3s ease;box-shadow:var(--shadow-light),var(--shadow-dark);letter-spacing:.5px}.btn:hover{box-shadow:var(--shadow-light),var(--shadow-dark),0 0 0 2px var(--highlight-color);transform:translateY(-2px)}.btn:active{transform:translateY(1px);box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark)}.btn-secondary{background:var(--primary-bg)}.btn-secondary:hover{background:var(--secondary-bg)}.validation-results{margin-bottom:1.5rem;padding:1.25rem;border-radius:12px;display:none;box-shadow:var(--shadow-light),var(--shadow-dark);font-family:Montserrat,sans-serif}.validation-success{display:flex;align-items:center;background:#e8f5ee;color:#2a6b46;border:1px solid #c3e6cb;border-radius:12px;box-shadow:var(--shadow-light),var(--shadow-dark)}.validation-error{display:flex;flex-direction:column;background:#f5eaea;color:#7e3b42;border:1px solid #f5c6cb;border-radius:12px;box-shadow:var(--shadow-light),var(--shadow-dark)}.color-info{margin-bottom:1.5rem;padding:1.25rem;border-radius:12px;background:var(--secondary-bg);color:var(--text-color);border:1px solid var(--border-color);display:none;box-shadow:var(--shadow-light),var(--shadow-dark);font-family:Montserrat,sans-serif}.validation-header{display:flex;align-items:center;margin-bottom:.5rem}.validation-icon{font-size:1.5rem;margin-right:.75rem;text-shadow:1px 1px 2px rgba(255,255,255,.7)}.validation-message{font-weight:500}.validation-error-list{margin-top:.5rem;margin-left:2.25rem;font-size:.9rem;padding:.75rem;border-radius:10px;background:rgba(255,255,255,.5);box-shadow:var(--shadow-inset-light),var(--shadow-inset-dark)}.validation-error-list li{margin-bottom:.25rem}@media (max-width: 992px){.header{flex-direction:column;padding:1.5rem 2rem;text-align:center;gap:1rem;border-radius:0 0 calc(var(--border-radius) * .8) calc(var(--border-radius) * .8)}.header-controls{flex-direction:column;width:100%}#filter-input{width:100%}.icon-list,.inkable-icon-list,.specific-icon-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}:root{--shadow-light: 12px 12px 24px #D1D9E6;--shadow-dark: -12px -12px 24px #FFFFFF}}@media (max-width: 768px){.comparison-container{flex-direction:column}.upload-section,.preview-section{width:100%;padding:1.5rem}.icon-card svg{height:60px;width:60px}:root{--shadow-light: 12px 12px 24px #D1D9E6;--shadow-dark: -12px -12px 24px #FFFFFF;--shadow-inset-light: inset -12px -12px 24px #FFFFFF;--shadow-inset-dark: inset 12px 12px 24px #D1D9E6;--border-radius: 12px}}@media (max-width: 480px){.icon-list,.inkable-icon-list,.specific-icon-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.8rem}.controls{flex-direction:column}.btn{width:100%}.icon-card{padding:1rem}:root{--shadow-light: 12px 12px 24px #D1D9E6;--shadow-dark: -12px -12px 24px #FFFFFF;--shadow-inset-light: inset -12px -12px 24px #FFFFFF;--shadow-inset-dark: inset 12px 12px 24px #D1D9E6;--border-radius: 10px}}