.hero-section{background:linear-gradient(135deg,#2563eb,#7c3aed,#8b5cf6);position:relative;overflow:hidden;padding:4rem 1.5rem 3.5rem;text-align:center}.hero-section:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 600px 400px at 20% 50%,rgba(255,255,255,.1) 0%,transparent 70%),radial-gradient(ellipse 500px 350px at 80% 30%,rgba(255,255,255,.08) 0%,transparent 70%);pointer-events:none}.hero-title{font-size:2.75rem;font-weight:800;line-height:1.15;color:#fff;margin-bottom:.75rem;position:relative}.hero-tagline{font-size:1.125rem;color:#ffffffd9;max-width:32rem;margin:0 auto;position:relative}@media(min-width:640px){.hero-section{padding:5rem 2rem 4.5rem}.hero-title{font-size:3.25rem}}@media(min-width:1024px){.hero-title{font-size:3.5rem}}.tool-card{background-color:#fff;border-radius:.75rem;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .07), 0 1px 2px -1px rgb(0 0 0 / .07);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);padding:2rem 1.5rem;cursor:pointer;transition:all .28s cubic-bezier(.4,0,.2,1);border:1px solid #f3f4f6;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent-color, #2563eb);border-radius:.75rem .75rem 0 0;transition:opacity .28s cubic-bezier(.4,0,.2,1)}.tool-card:hover{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .06);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transform:translateY(-6px);border-color:var(--accent-color, #2563eb)}.tool-card:hover:before{opacity:.9}.tool-card-icon{font-size:3rem;line-height:1;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:1rem;background:var(--accent-bg, #eff6ff);color:var(--accent-color, #3b82f6)}.tool-card-icon svg{width:2rem;height:2rem}.tool-card-title{font-size:1.125rem;line-height:1.75rem;font-weight:700;margin-bottom:.5rem;color:#111827}.tool-card-desc{color:#6b7280;font-size:.875rem;line-height:1.5}.tool-card[data-tool=mosaic]{--accent-color: #2563eb;--accent-bg: #eff6ff}.tool-card[data-tool=watermark]{--accent-color: #8b5cf6;--accent-bg: #f5f3ff}.tool-card[data-tool=resize]{--accent-color: #059669;--accent-bg: #ecfdf5}.tool-card[data-tool=converter]{--accent-color: #d97706;--accent-bg: #fffbeb}.home-bg{background:linear-gradient(180deg,#f8fafc,#f1f5f9,#e8ecf4)}.site-footer{background:linear-gradient(135deg,#1e293b,#0f172a);color:#94a3b8;text-align:center;padding:1.5rem 1rem;font-size:.875rem;border-top:1px solid #1e293b}.site-footer p{margin:0;letter-spacing:.01em}.upload-zone{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));border-radius:.5rem;padding:2rem;text-align:center;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.upload-zone:hover,.upload-zone.dragover{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))}.tool-layout{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;max-width:80rem;margin-left:auto;margin-right:auto}@media(min-width:1024px){.tool-layout{flex-direction:row}}.tool-preview{flex:1 1 0%;min-height:0}.tool-controls{width:100%;flex-shrink:0}@media(min-width:1024px){.tool-controls{width:20rem}}.canvas-container{background-color:#fff;border-radius:.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);overflow:hidden;display:flex;align-items:center;justify-content:center;max-height:70vh;position:relative}.change-image-btn{position:absolute;top:.5rem;right:.5rem;--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));padding:.375rem .75rem;border-radius:.25rem;font-size:.75rem;line-height:1rem;opacity:.7;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;z-index:5}.change-image-btn:hover{opacity:1}.canvas-container.dragover{outline-width:2px;outline-style:dashed;--tw-outline-color: #3b82f6;outline-color:var(--tw-outline-color);outline-offset:-2px}.grid-positions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;width:8rem;height:8rem}.grid-position{border-width:1px;border-radius:.25rem;cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.grid-position:hover,.grid-position.active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.grid-position.active:after{content:"✓";--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-size:.75rem;line-height:1rem;display:flex;align-items:center;justify-content:center;height:100%}.toast{position:fixed;top:1rem;right:1rem;padding:.5rem 1rem;border-radius:.25rem;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;z-index:50;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation:toastFadeIn .2s ease-in-out}.toast.error{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.toast.success{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.toast.info{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.toast.fade-out{opacity:0}.fade-in{animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-in{animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tool-nav{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.5rem;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);position:sticky;top:0;z-index:40}.nav-link{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;font-size:.875rem;line-height:1.25rem;font-weight:500;padding-top:.25rem;padding-bottom:.25rem}.nav-link:hover{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.nav-link-active{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity));border-bottom-width:2px;--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}.nav-links{display:flex;gap:1rem}.spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}.spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fffc;z-index:10;border-radius:inherit}@keyframes spin{to{transform:rotate(360deg)}}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline-width:2px;outline-style:solid;--tw-outline-offset: 2px;outline-offset:var(--tw-outline-offset);--tw-ring-color: #3b82f6;outline-color:var(--tw-ring-color)}#wm-text{border-width:2px;border-color:#9333ea;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;background-color:#faf5ff;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}#wm-text:focus{border-color:#7c3aed;box-shadow:0 0 0 3px #9333ea4d;outline:none}#wm-text::-moz-placeholder{color:#a78bfa}#wm-text::placeholder{color:#a78bfa}.skip-link{position:absolute;top:-2.5rem;left:0;--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));padding:.5rem 1rem;z-index:50;transition:top .2s ease-in-out}.skip-link:focus{top:0}.btn-primary{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));border-radius:.25rem;padding:.5rem 1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;font-weight:500}.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.btn-secondary{border-width:1px;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity));--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity));border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn-secondary:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.btn-active{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));border-width:1px;--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity));border-radius:.25rem}.btn-danger{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));border-radius:.25rem;padding:.5rem 1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;font-weight:500}.btn-danger:hover{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.btn-download{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));border-radius:.25rem;padding:.625rem 1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;font-weight:500}.btn-download:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity))}.btn-primary:disabled,.btn-secondary:disabled,.btn-download:disabled,.btn-active:disabled{opacity:.5;cursor:not-allowed}.btn-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.slider-with-input{display:flex;align-items:center;gap:12px}.slider-with-input input[type=range]{flex:1}.slider-input-wrapper{display:flex;align-items:center;gap:4px;min-width:80px}.slider-number-input{width:60px;padding:4px 8px;border:1px solid #d1d5db;border-radius:6px;text-align:center;font-size:14px;background-color:#fff}.slider-number-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.slider-unit{font-size:14px;color:#6b7280;min-width:20px}