.search-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding-top:10vh;animation:fadeIn .15s ease-out}.search-modal{width:100%;max-width:600px;background:var(--white);border-radius:16px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.search-header{padding:16px;border-bottom:1px solid var(--gray-200)}.search-input-wrapper{display:flex;align-items:center;gap:12px}.search-icon{width:20px;height:20px;color:var(--gray-400);flex-shrink:0}.search-input{flex:1;border:none;font-size:18px;color:var(--gray-800);background:transparent}.search-input:focus{outline:none}.search-input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.search-input::placeholder{color:var(--gray-400)}.search-esc{background:var(--gray-100);border:1px solid var(--gray-200);border-radius:4px;padding:2px 6px;font-size:11px;color:var(--gray-500);font-family:inherit}.search-results{max-height:400px;overflow-y:auto;padding:8px}.search-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);padding:8px 12px}.results-list{list-style:none;padding:0;margin:0}.result-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;cursor:pointer;transition:all .15s ease}.result-item:hover,.result-item.selected{background:var(--gray-100)}.result-item.selected{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff}.result-item.selected .result-category{color:#fffc}.result-item.selected .result-arrow{color:#fff}.result-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--gray-100);border-radius:8px;font-size:20px;flex-shrink:0}.result-item.selected .result-icon{background:#fff3}.result-content{flex:1;min-width:0}.result-name{display:block;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-category{display:block;font-size:12px;color:var(--gray-500)}.result-arrow{width:16px;height:16px;color:var(--gray-400);flex-shrink:0}.no-results{text-align:center;padding:40px 20px;color:var(--gray-500)}.no-results p:first-child{font-size:16px;color:var(--gray-700);margin-bottom:8px}.no-results-hint{font-size:14px}.search-footer{display:flex;gap:16px;padding:12px 16px;background:var(--gray-50);border-top:1px solid var(--gray-200)}.search-hint{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--gray-500)}.search-hint kbd{background:var(--white);border:1px solid var(--gray-200);border-radius:4px;padding:2px 6px;font-size:11px;color:var(--gray-600);font-family:inherit;box-shadow:0 1px 2px #0000000d}@media (max-width: 640px){.search-overlay{padding:16px;padding-top:5vh}.search-modal{max-height:80vh}.search-footer{flex-wrap:wrap;gap:8px}}.data-export-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}.data-export-modal{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:480px;width:90%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .2s ease}.data-export-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color)}.data-export-modal-header h2{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.data-export-modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-tertiary);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.data-export-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.data-export-modal-body{padding:1.5rem;overflow-y:auto;flex:1}.data-warning{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:var(--radius-md);margin-bottom:1.5rem}.warning-icon{width:24px;height:24px;flex-shrink:0;color:#f59e0b}.data-warning p{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}.data-list{background:var(--bg-secondary);border-radius:var(--radius-md);overflow:hidden;margin-bottom:1.5rem}.data-list-header{display:flex;justify-content:space-between;padding:.75rem 1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);border-bottom:1px solid var(--border-color)}.data-item{display:flex;justify-content:space-between;align-items:center;padding:.875rem 1rem;border-bottom:1px solid var(--border-color)}.data-item:last-child{border-bottom:none}.data-item-info{display:flex;flex-direction:column;gap:.25rem}.data-item-label{font-size:.9rem;font-weight:500;color:var(--text-primary)}.data-item-count{font-size:.75rem;color:var(--text-tertiary)}.data-item-size{font-size:.85rem;color:var(--text-secondary);font-family:var(--font-mono)}.data-total{display:flex;justify-content:space-between;padding:.875rem 1rem;font-weight:600;color:var(--text-primary);background:var(--bg-tertiary)}.data-export-actions{display:flex;gap:.75rem}.btn-export,.btn-export-csv,.btn-clear{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:44px}.btn-export{background:var(--accent);color:#fff;border:none}.btn-export:hover{background:var(--accent-dark)}.btn-export-csv{background:#059669;color:#fff;border:none}.btn-export-csv:hover{background:#047857}.btn-export svg,.btn-export-csv svg,.btn-clear svg{width:18px;height:18px}.btn-clear{background:transparent;color:#ef4444;border:1px solid #ef4444}.btn-clear:hover{background:#ef44441a}.no-data-message{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1rem}.no-data-message svg{width:48px;height:48px;color:var(--success);margin-bottom:1rem}.no-data-message p{font-size:1rem;font-weight:500;color:var(--text-primary);margin:0 0 .5rem}.no-data-message span{font-size:.85rem;color:var(--text-tertiary)}.data-export-modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color);background:var(--bg-secondary);display:flex;justify-content:flex-end}.btn-cancel{padding:.625rem 1.25rem;background:var(--bg-tertiary);color:var(--text-secondary);border:none;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:44px}.btn-cancel:hover{background:var(--border-color);color:var(--text-primary)}[data-theme=dark] .data-export-modal{border:1px solid var(--border-color)}[data-theme=dark] .data-warning{background:#f59e0b26}@media (max-width: 480px){.data-export-modal{width:95%;max-height:90vh}.data-export-modal-header,.data-export-modal-body,.data-export-modal-footer{padding:1rem}.data-export-actions{flex-direction:column}.btn-export,.btn-export-csv,.btn-clear{width:100%}}.header{background:var(--white);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}.header-content{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1.25rem;min-height:50px}.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}.logo-container{display:flex;flex-direction:row;align-items:center;gap:.5rem}.logo-icon{background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--white);padding:.35rem .5rem;border-radius:var(--radius);font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content}.logo-text{font-weight:600;font-size:18px;color:var(--gray-800);letter-spacing:.5px}.logo-version{font-size:.65rem;color:var(--gray-500);font-weight:400;letter-spacing:.5px}.nav{display:flex;gap:1rem}.nav-link{padding:.75rem 1.25rem;color:var(--gray-800);border-radius:var(--radius);font-weight:600;font-size:15px;transition:color .2s,background-color .2s,box-shadow .2s;min-height:44px;display:flex;align-items:center}.nav-link:hover,.nav-link:focus-visible{color:var(--primary);background:var(--gray-100);outline:none}.nav-link.active{font-weight:700;color:var(--primary);background:#4f46e526;border-left:3px solid var(--primary);padding-left:.95rem}.nav-link:focus-visible{box-shadow:0 0 0 3px #4f46e51a}.nav-cta{background:var(--primary);color:var(--white)!important;padding:.75rem 1.5rem;margin-left:.5rem;font-size:15px;font-weight:600;min-height:44px;display:flex;align-items:center;border:none}.nav-cta:hover,.nav-cta:focus-visible{background:var(--primary-dark);color:var(--white)!important;transform:translateY(-1px);outline:none}.nav-cta:focus-visible{box-shadow:0 0 0 3px #4f46e54d}.nav-dropdown{position:relative}.dropdown-trigger{display:flex;align-items:center;gap:.25rem;padding:.75rem 1.25rem;background:none;border:none;cursor:pointer;font-size:15px;font-family:inherit;font-weight:600;color:var(--gray-800);min-height:44px;border-radius:var(--radius);transition:color .2s,background-color .2s,box-shadow .2s}.dropdown-trigger:hover,.dropdown-trigger:focus-visible{color:var(--primary);background:var(--gray-100);outline:none}.dropdown-trigger:focus-visible{box-shadow:0 0 0 3px #4f46e51a}.dropdown-arrow{font-size:.75rem}.dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;max-height:0;overflow:hidden;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease,max-height .3s ease,padding .2s ease;z-index:200;pointer-events:none}.dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0);max-height:400px;overflow-y:auto;padding:.5rem;pointer-events:auto}.dropdown-item{display:flex;align-items:center;gap:.75rem;padding:1rem 1.125rem;color:var(--gray-800);border-radius:var(--radius);transition:color .2s,background-color .2s;font-size:15px;font-weight:400;min-height:44px;border-bottom:1px solid var(--gray-100)}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover,.dropdown-item:focus-visible{background:var(--gray-100);color:var(--primary);outline:none}.dropdown-item:focus-visible{box-shadow:0 0 0 3px #4f46e51a}.dropdown-item.active{font-weight:600;background:#4f46e533;color:var(--primary);border-left:2px solid var(--primary);padding-left:calc(1.125rem - 2px)}.dropdown-icon{font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0}.icon-text{font-size:.9rem;font-weight:500;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}.dropdown-icon svg{width:18px;height:18px;color:currentColor}.search-trigger{display:flex;align-items:center;gap:8px;padding:.75rem 1rem;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:8px;cursor:pointer;transition:all .2s ease;flex:1;max-width:280px;margin:0 1rem;min-height:44px}.search-trigger:hover,.search-trigger:focus-visible{background:var(--gray-50);border-color:var(--gray-300);box-shadow:0 2px 8px #0000000d;outline:none}.search-trigger:focus-visible{box-shadow:0 0 0 3px #4f46e51a}.search-trigger-icon{width:16px;height:16px;color:var(--gray-800);flex-shrink:0}.search-trigger-text{flex:1;text-align:left;font-size:15px;color:var(--gray-800);font-weight:500}.search-trigger-kbd{background:var(--white);border:1px solid var(--gray-200);border-radius:4px;padding:2px 6px;font-size:11px;color:var(--gray-800);font-family:inherit}[data-theme=dark] .search-trigger-icon,[data-theme=dark] .search-trigger-text,[data-theme=dark] .search-trigger-kbd{color:var(--gray-50)}.mobile-menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.5rem}.mobile-menu-btn span{display:block;width:24px;height:2px;background:var(--gray-800);transition:all .3s}@media (max-width: 768px){.mobile-menu-btn{display:flex}.header-content{flex-wrap:nowrap;padding:.75rem 1rem}.logo{order:1;gap:.5rem}.logo-icon{padding:.375rem .625rem;font-size:.95rem}.logo-text{font-size:18px}.search-trigger{margin:0 .5rem;max-width:40px;width:40px;flex:0 0 40px;order:3;padding:8px;justify-content:center}.search-trigger-text,.search-trigger-kbd{display:none}.theme-toggle{order:2;margin-right:.25rem;width:36px;height:36px}.theme-toggle svg{width:18px;height:18px}.mobile-menu-btn{order:4;margin-left:.25rem}.nav{position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:1.25rem;gap:.5rem;box-shadow:var(--shadow-md);display:none}.nav-open{display:flex}}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius);cursor:pointer;transition:all .2s ease;color:var(--gray-800)}.theme-toggle:hover,.theme-toggle:focus-visible{background:var(--gray-200);color:var(--primary);border-color:var(--gray-300);outline:none}.theme-toggle:focus-visible{box-shadow:0 0 0 3px #4f46e54d}.theme-toggle svg{width:20px;height:20px}[data-theme=dark] .theme-toggle{background:var(--gray-200);border-color:var(--gray-300);color:var(--warning)}[data-theme=dark] .theme-toggle:hover{background:var(--gray-300);color:var(--warning)}.settings-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:44px;min-height:44px;padding:0;background:transparent;border:1px solid var(--gray-300);border-radius:var(--radius);cursor:pointer;transition:all .2s ease;color:var(--gray-800);margin-right:.25rem}.settings-btn:hover,.settings-btn:focus-visible{background:var(--gray-200);color:var(--primary);border-color:var(--gray-300);outline:none}.settings-btn:focus-visible{box-shadow:0 0 0 3px #4f46e54d}.settings-btn svg{width:18px;height:18px}[data-theme=dark] .settings-btn{background:var(--gray-200);border-color:var(--gray-300);color:var(--text-secondary)}[data-theme=dark] .settings-btn:hover{background:var(--gray-300);color:var(--primary)}.footer{background:#1f2937;color:#e5e7eb;padding:3rem 0 1.5rem;flex-shrink:0;margin-top:auto;width:100%}[data-theme=dark] .footer{background:#111827!important;color:#e5e7eb!important}.footer-content{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:1.5rem;margin-bottom:2rem;align-items:start}.footer-brand .logo-icon{background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--white);padding:.5rem .75rem;border-radius:var(--radius);font-weight:700;display:inline-block;margin-bottom:1rem}.footer-brand p{color:var(--gray-200);max-width:300px}.footer-keyboard-hint{margin-top:1rem;font-size:.85rem;color:#b0b7c3;display:flex;align-items:center;gap:.25rem}.footer-keyboard-hint kbd{background:var(--gray-700);border:1px solid var(--gray-600);border-radius:4px;padding:2px 6px;font-size:.75rem;font-family:inherit}.footer-links{border-left:3px solid var(--primary);padding-left:1.5rem;margin-bottom:2rem;overflow:hidden;word-wrap:break-word;min-width:0}.footer-links:not(:last-of-type){border-right:1px solid var(--gray-600);padding-right:1rem}.footer-links h4{color:var(--white);font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.5rem;text-align:left;word-break:break-word}.footer-links a{display:block;color:#f3f4f6;margin-bottom:.75rem;transition:color .2s ease,text-decoration .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease;text-decoration:none;position:relative;padding:.5rem .75rem;font-size:.95rem;line-height:1.5;background-color:#818cf814;border-left:2px solid transparent;border-radius:4px;text-align:left;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.footer-links a:hover{color:var(--white);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;background-color:#818cf826;border-left-color:var(--primary)}.footer-links a:focus{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:2px;color:var(--white)}.footer-links a:focus:not(:focus-visible){outline:none}.footer-links a:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:4px;color:var(--white);background-color:#818cf826;box-shadow:0 0 0 3px #818cf833}.footer-links a[target=_blank]:after{content:" →";color:var(--primary-light);font-weight:500;margin-left:.25rem}.footer-links.primary-categories{border-left-width:3px;border-left-color:var(--primary);padding-left:1.5rem}.footer-links.primary-categories h4{color:#fff;font-weight:800;letter-spacing:.05em;font-size:1rem}.footer-links.secondary-categories{border-left-width:2px;border-left-color:var(--primary);padding-left:1.5rem;position:relative;text-align:left;overflow:hidden;word-wrap:break-word;min-width:0}.footer-links.secondary-categories:before{content:"";position:absolute;top:-1rem;left:0;right:2rem;height:1px;background:linear-gradient(90deg,rgba(129,140,248,.3) 0%,transparent 100%)}.footer-links.secondary-categories h4{color:#d1d5db;font-weight:700;letter-spacing:.03em;font-size:.95rem;text-align:left;word-break:break-word}.footer-links.secondary-categories a{color:#f3f4f6;background-color:#818cf80d;text-align:left;word-wrap:break-word;overflow-wrap:break-word}.footer-links.secondary-categories a:hover{background-color:#818cf81f}.footer-bottom{border-top:1px solid var(--gray-700);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:.875rem;color:#b0b7c3}.footer-bottom a{color:var(--primary-light);text-decoration:none;transition:color .2s ease,text-decoration .2s ease,background-color .2s ease,box-shadow .2s ease;padding:.25rem .5rem;border-radius:4px;background-color:#818cf814}.footer-bottom a:hover{color:var(--white);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;background-color:#818cf826}.footer-bottom a:focus{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:2px;color:var(--white)}.footer-bottom a:focus:not(:focus-visible){outline:none}.footer-bottom a:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:4px;color:var(--white);background-color:#818cf826;box-shadow:0 0 0 3px #818cf833}[data-theme=dark] .footer-links.primary-categories h4{color:#fff;font-weight:800;letter-spacing:.05em}[data-theme=dark] .footer-links.secondary-categories h4{color:#d1d5db;font-weight:700;letter-spacing:.03em;font-size:.95rem;text-align:left;word-break:break-word}[data-theme=dark] .footer-links.secondary-categories a{color:#f3f4f6;background-color:#818cf80d;text-align:left;word-wrap:break-word;overflow-wrap:break-word}[data-theme=dark] .footer-links.secondary-categories a:hover{color:#e5e7eb;background-color:#818cf81f}[data-theme=dark] .footer-brand p{color:#d1d5db}[data-theme=dark] .footer-keyboard-hint{color:#b0b7c3}[data-theme=dark] .footer-keyboard-hint kbd{background:#374151;border-color:#4b5563}[data-theme=dark] .footer-links h4{color:#f9fafb}[data-theme=dark] .footer-links:not(:last-of-type){border-right-color:#374151}[data-theme=dark] .footer-links a{color:#f3f4f6;background-color:#818cf814;border-left:2px solid transparent;border-radius:4px}[data-theme=dark] .footer-links a:hover{color:#f9fafb;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;background-color:#818cf826;border-left-color:var(--primary)}[data-theme=dark] .footer-links a:focus{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:2px;color:#f9fafb}[data-theme=dark] .footer-links a:focus:not(:focus-visible){outline:none}[data-theme=dark] .footer-links a:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:4px;color:#f9fafb;background-color:#818cf826;box-shadow:0 0 0 3px #818cf833}[data-theme=dark] .footer-bottom{border-top-color:#374151;color:#b0b7c3}[data-theme=dark] .footer-bottom a:hover{color:#f9fafb;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;background-color:#818cf826}[data-theme=dark] .footer-bottom a:focus{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:2px;color:#f9fafb}[data-theme=dark] .footer-bottom a:focus:not(:focus-visible){outline:none}[data-theme=dark] .footer-bottom a:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:4px;color:#f9fafb;background-color:#818cf826;box-shadow:0 0 0 3px #818cf833}@media (hover: hover){.footer-links a:hover{transform:translate(4px)}}@media (max-width: 768px){.footer-content{grid-template-columns:1fr;gap:2rem}.footer-links{border-left:none;border-bottom:2px solid var(--primary);padding-left:0;padding-bottom:1rem;margin-bottom:2rem;position:relative}.footer-links.primary-categories{border-bottom-width:2px;border-bottom-color:var(--primary)}.footer-links.secondary-categories{border-bottom-width:1px;border-bottom-color:#818cf866}.footer-links.secondary-categories:before{display:none}.footer-links:not(:last-of-type){border-right:none;padding-right:0}.footer-links a{padding:.75rem;margin-bottom:0;min-height:44px;display:flex;align-items:center;transition:all .25s ease}.footer-links a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;background-color:#818cf826;border-left-color:var(--primary)}.footer-links a:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:4px;background-color:#818cf826;box-shadow:0 0 0 3px #818cf833}.footer-bottom{flex-direction:column;gap:.75rem;text-align:center}}.scroll-to-top{position:fixed;bottom:24px;right:24px;z-index:1000;width:48px;height:48px;border:none;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #4f46e566,0 2px 4px #0000001a;opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:all .3s cubic-bezier(.4,0,.2,1)}.scroll-to-top:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 20px #4f46e580,0 4px 8px #00000026}.scroll-to-top:active{transform:translateY(0) scale(.95)}.scroll-to-top:focus{outline:none;box-shadow:0 0 0 3px #4f46e54d,0 4px 12px #4f46e566}.scroll-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.scroll-to-top svg{transition:transform .2s ease}.scroll-to-top:hover svg{transform:translateY(-2px)}@media (max-width: 768px){.scroll-to-top{bottom:20px;right:20px;width:44px;height:44px}}@media (prefers-reduced-motion: reduce){.scroll-to-top{transition:opacity .2s ease;transform:none}.scroll-to-top.visible,.scroll-to-top:hover{transform:none}.scroll-to-top:hover svg{transform:none}}.shortcuts-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.shortcuts-modal{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-width:480px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .2s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.shortcuts-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-color)}.shortcuts-modal-header h2{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.shortcuts-modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-tertiary);cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.shortcuts-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.shortcuts-modal-body{padding:1.5rem;overflow-y:auto;flex:1}.shortcuts-section{margin-bottom:1.5rem}.shortcuts-section:last-child{margin-bottom:0}.shortcuts-category{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.tool-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;background:var(--accent-bg);color:var(--accent);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-radius:9999px}.shortcuts-section.tool-specific{background:var(--bg-secondary);margin:0 -1.5rem;padding:1rem 1.5rem;border-top:1px solid var(--border-color)}.shortcuts-section.tool-specific .shortcuts-category{color:var(--accent)}.shortcuts-list{display:flex;flex-direction:column;gap:.5rem}.shortcut-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0}.shortcut-keys{display:flex;align-items:center;gap:.25rem}.shortcut-key{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 .5rem;background:var(--bg-tertiary);border:1px solid var(--border-dark);border-radius:var(--radius-sm);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.8rem;font-weight:500;color:var(--text-secondary);box-shadow:0 1px 0 var(--border-dark)}.key-separator{color:var(--text-muted);font-size:.75rem;margin:0 .125rem}.shortcut-description{font-size:.9rem;color:var(--text-secondary)}.shortcuts-modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color);background:var(--bg-secondary)}.shortcuts-modal-footer p{font-size:.85rem;color:var(--text-tertiary);text-align:center;margin:0}.shortcuts-modal-footer kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 .375rem;background:var(--bg-primary);border:1px solid var(--border-dark);border-radius:var(--radius-sm);font-family:inherit;font-size:.75rem;font-weight:500;color:var(--text-secondary);margin:0 .25rem}[data-theme=dark] .shortcuts-modal{background:var(--bg-primary);border:1px solid var(--border-color)}[data-theme=dark] .shortcut-key{background:var(--bg-dark);border-color:var(--border-dark)}[data-theme=dark] .shortcuts-modal-footer{background:var(--bg-tertiary)}@media (max-width: 480px){.shortcuts-modal{width:95%;max-height:85vh}.shortcuts-modal-header,.shortcuts-modal-body{padding:1rem}.shortcut-item{flex-direction:column;align-items:flex-start;gap:.375rem}}.error-boundary{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:2rem}.error-boundary-content{text-align:center;max-width:500px}.error-icon{color:var(--danger, #ef4444);margin-bottom:1.5rem}.error-icon svg{width:64px;height:64px}.error-title{font-size:1.75rem;font-weight:700;color:var(--text-primary, #1f2937);margin:0 0 1rem}.error-message{color:var(--text-secondary, #6b7280);font-size:1rem;line-height:1.6;margin:0 0 2rem}.error-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.error-details{margin-top:2rem;text-align:left;background:var(--gray-100, #f3f4f6);border-radius:8px;padding:1rem}.error-details summary{cursor:pointer;font-weight:500;color:var(--text-secondary, #6b7280);margin-bottom:.5rem}.error-details pre{font-size:.75rem;overflow-x:auto;background:var(--gray-200, #e5e7eb);padding:.5rem;border-radius:4px;margin:.5rem 0;white-space:pre-wrap;word-break:break-word}[data-theme=dark] .error-details{background:var(--gray-800, #1f2937)}[data-theme=dark] .error-details pre{background:var(--gray-700, #374151)}.site-rating{display:flex;align-items:center;gap:1rem}.site-rating-stars{display:flex;gap:.25rem}.site-rating .star{font-size:1.5rem;line-height:1}.site-rating .star.filled{color:#fbbf24}.site-rating .star.half{color:#fbbf24;opacity:.5}.site-rating .star.empty{color:#e5e7eb}.site-rating-text{display:flex;flex-direction:column;gap:.125rem}.site-rating-value{font-size:1.25rem;font-weight:600;color:var(--text-color)}.site-rating-details{font-size:.875rem;color:var(--text-secondary)}.site-rating-small .star,.site-rating-small .site-rating-value{font-size:1rem}.site-rating-small .site-rating-details{font-size:.75rem}.site-rating-large .star{font-size:2rem}.site-rating-large .site-rating-value{font-size:1.5rem}.site-rating-large .site-rating-details{font-size:1rem}@media (max-width: 768px){.site-rating{flex-direction:column;text-align:center;gap:.5rem}}.mini-rating{display:flex;align-items:center;gap:.25rem}.mini-rating-stars{display:flex;gap:1px}.mini-star{width:12px;height:12px}.mini-star-full,.mini-star-half{color:#fbbf24}.mini-star-empty{color:var(--gray-300)}[data-theme=dark] .mini-star-empty{color:var(--gray-600)}.mini-rating-count{font-size:.75rem;color:var(--gray-500);font-weight:400}[data-theme=dark] .mini-rating-count{color:var(--gray-400)}.new-badge{display:inline-flex;align-items:center;padding:.2em .5em;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:4px;box-shadow:0 1px 3px #10b9814d;animation:new-badge-pulse 2s ease-in-out infinite}.new-badge--absolute{position:absolute;top:.5rem;right:.5rem}.new-badge--card{position:absolute;top:-6px;right:-6px;z-index:1}@keyframes new-badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.02)}}[data-theme=dark] .new-badge{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 1px 3px #34d3994d}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,var(--gray-200) 0%,var(--gray-100) 50%,var(--gray-200) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}[data-theme=dark] .skeleton{background:linear-gradient(90deg,var(--gray-700) 0%,var(--gray-600) 50%,var(--gray-700) 100%);background-size:200% 100%}.skeleton-tool-pills{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.skeleton-tool-pill{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--white);border-radius:50px;box-shadow:var(--shadow);border:1px solid var(--gray-200)}[data-theme=dark] .skeleton-tool-pill{background:var(--bg-secondary);border-color:var(--border-color)}.skeleton-pill-icon{width:36px;height:36px;flex-shrink:0}.skeleton-pill-text{width:80px;height:16px}@media (max-width: 768px){.skeleton-tool-pills{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}.skeleton-tool-pill{flex-shrink:0}}.skeleton-rating{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}[data-theme=dark] .skeleton-rating{background:var(--bg-secondary)}.skeleton-rating-stars{display:flex;gap:.5rem}.skeleton-star{width:32px;height:32px}.skeleton-rating-value{width:48px;height:36px}.skeleton-rating-count{width:120px;height:16px}.skeleton-rating-text{width:280px;height:16px;max-width:100%}.skeleton-tool-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.skeleton-tool-card{padding:1.5rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--gray-100);display:flex;flex-direction:column;gap:.75rem}[data-theme=dark] .skeleton-tool-card{background:var(--bg-secondary);border-color:var(--border-color)}.skeleton-card-icon{width:48px;height:48px}.skeleton-card-title{width:70%;height:20px}.skeleton-card-desc{width:100%;height:14px}.skeleton-card-desc-short{width:60%;height:14px}.skeleton-category-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.skeleton-category-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--gray-100)}[data-theme=dark] .skeleton-category-card{background:var(--bg-secondary);border-color:var(--border-color)}.skeleton-category-icon{width:56px;height:56px;flex-shrink:0}.skeleton-category-info{flex:1;display:flex;flex-direction:column;gap:.5rem}.skeleton-category-title{width:70%;height:18px}.skeleton-category-count{width:50px;height:14px}@media (prefers-reduced-motion: reduce){.skeleton{animation:skeleton-pulse 2s ease-in-out infinite;background:var(--gray-200)}[data-theme=dark] .skeleton{background:var(--gray-700)}}.home{display:flex;flex-direction:column;width:100%}.hero{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:var(--white);padding:5rem 0;text-align:center}.hero h1{font-size:3rem;font-weight:700;margin-bottom:1rem;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.5),0 4px 16px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.7)}.hero-subtitle{font-size:1.25rem;opacity:1;max-width:600px;margin:0 auto 2rem;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.6)}.hero-search{max-width:600px;margin:0 auto 2rem;position:relative}.hero-search-wrapper{display:flex;align-items:center;background:var(--white);border-radius:var(--radius-lg);padding:.75rem 1rem;box-shadow:var(--shadow-lg)}.hero-search-icon{width:20px;height:20px;color:var(--gray-500);margin-right:12px;flex-shrink:0}.hero-search-input{flex:1;border:none;font-size:1rem;color:var(--gray-800);background:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-search-input:focus{outline:none}.hero-search-input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.hero-search-input::placeholder{color:var(--white);opacity:.8}.hero-search-input:-ms-input-placeholder{color:var(--white);opacity:.8}.hero-search-input::-ms-input-placeholder{color:var(--white);opacity:.8}.hero-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;z-index:100}.hero-search-result{display:flex;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;transition:background .15s ease}.hero-search-result:hover,.hero-search-result.selected{background:var(--gray-100)}.hero-search-result-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--gray-100);border-radius:8px;font-size:1.25rem;flex-shrink:0}.hero-search-result.selected .hero-search-result-icon{background:linear-gradient(135deg,var(--primary),var(--secondary))}.hero-search-result-content{flex:1;text-align:left;min-width:0}.hero-search-result-title{display:block;color:var(--gray-800);font-weight:500;margin-bottom:2px}.hero-search-result-desc{display:block;color:var(--gray-500);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-keyboard-hints{display:flex;justify-content:center;gap:1rem;padding:.75rem 1rem;background:var(--gray-50);border-top:1px solid var(--gray-200);font-size:.75rem;color:var(--gray-500)}.search-keyboard-hints span{display:flex;align-items:center;gap:.25rem}.search-keyboard-hints kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;padding:.125rem .35rem;font-family:inherit;font-size:.7rem;font-weight:500;background:var(--white);border:1px solid var(--gray-300);border-radius:4px;box-shadow:0 1px 2px #0000000d}[data-theme=dark] .search-keyboard-hints{background:var(--gray-800);border-top-color:var(--gray-700)}[data-theme=dark] .search-keyboard-hints kbd{background:var(--gray-700);border-color:var(--gray-600);color:var(--gray-300)}@media (max-width: 768px){.search-keyboard-hints{display:none}}@media (max-width: 480px){.hero-search-wrapper{padding:.5rem .75rem}.hero-search-input{font-size:.95rem}.hero-search-icon{width:18px;height:18px;margin-right:10px}}.hero-search-no-results{padding:1.5rem}.no-results-message{text-align:center;padding-bottom:1rem;border-bottom:1px solid var(--gray-200);margin-bottom:1rem}.no-results-icon{width:48px;height:48px;color:var(--gray-400);margin-bottom:.75rem}.no-results-message p{color:var(--gray-700);font-size:1rem;margin:0 0 .5rem}.no-results-message strong{color:var(--gray-800)}.no-results-hint{color:var(--gray-500);font-size:.875rem}.no-results-suggestions{margin-bottom:1rem}.suggestions-label{display:block;color:var(--gray-500);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;text-align:left}.suggestions-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.suggestion-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--gray-50);border-radius:var(--radius);text-decoration:none;transition:background .15s ease}.suggestion-item:hover{background:var(--gray-100)}.suggestion-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--gray-200);border-radius:6px;font-size:.875rem}.suggestion-name{color:var(--gray-700);font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browse-all-link{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.75rem;background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--white);text-decoration:none;border-radius:var(--radius);font-weight:500;font-size:.875rem;transition:opacity .15s ease}.browse-all-link:hover{opacity:.9}.browse-all-link svg{width:16px;height:16px}[data-theme=dark] .no-results-message{border-bottom-color:var(--gray-700)}[data-theme=dark] .no-results-icon{color:var(--gray-500)}[data-theme=dark] .no-results-message p{color:var(--gray-300)}[data-theme=dark] .no-results-message strong{color:var(--gray-200)}[data-theme=dark] .no-results-hint,[data-theme=dark] .suggestions-label{color:var(--gray-400)}[data-theme=dark] .suggestion-item{background:var(--gray-800)}[data-theme=dark] .suggestion-item:hover,[data-theme=dark] .suggestion-icon{background:var(--gray-700)}[data-theme=dark] .suggestion-name{color:var(--gray-300)}.surprise-me-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#ffffff26;color:var(--white);border:2px solid rgba(255,255,255,.3);border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,transform .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);margin-bottom:1.5rem}.surprise-me-btn:hover:not(:disabled){background:#ffffff40;border-color:#ffffff80;transform:scale(1.05)}.surprise-me-btn:active:not(:disabled){transform:scale(.98)}.surprise-me-btn:disabled{cursor:not-allowed;opacity:.8}.surprise-me-icon{font-size:1.25rem;display:inline-block;transition:transform .3s ease}.surprise-me-btn:hover:not(:disabled) .surprise-me-icon{transform:rotate(15deg)}.surprise-me-btn.shuffling .surprise-me-icon{animation:dice-roll .6s ease-in-out}@keyframes dice-roll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(180deg) scale(1.2)}50%{transform:rotate(360deg) scale(1)}75%{transform:rotate(540deg) scale(1.2)}to{transform:rotate(720deg) scale(1)}}.surprise-me-text{font-family:inherit}@media (prefers-reduced-motion: reduce){.surprise-me-btn.shuffling .surprise-me-icon{animation:none}.surprise-me-btn:hover:not(:disabled) .surprise-me-icon{transform:none}}.hero-stats{display:flex;gap:3rem;justify-content:center;margin-top:2rem}.hero-stat{text-align:center;padding:1.5rem;margin-bottom:1rem}.hero-stat-number{display:block;font-size:2.5rem;font-weight:700;padding:1rem 0;line-height:1.3}.hero-stat-label{display:block;font-size:.95rem;opacity:.85;margin-top:.75rem}.hero-keyboard-hint{margin-top:1.5rem;font-size:.85rem;opacity:.7}.hero-keyboard-hint kbd{display:inline-block;padding:.15rem .5rem;background:#fff3;border-radius:4px;font-family:inherit;font-size:.8rem;border:1px solid rgba(255,255,255,.3);margin:0 .1rem}.categories-section{padding:var(--section-padding) 0;background:var(--bg-secondary)}.categories-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:900px;margin:0 auto;align-items:stretch}.category-card{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:var(--white);border-radius:var(--radius-lg);text-decoration:none;min-height:80px;box-shadow:var(--shadow-md);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;border:1px solid transparent;cursor:pointer}.category-card:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 4px 12px #00000026;border-color:var(--category-color)}.category-card:focus{outline:none;box-shadow:0 4px 12px #00000026,0 0 0 3px #4f46e51a;border-color:var(--category-color)}.category-card:active{transform:translateY(-2px) scale(1.01)}.category-icon{font-size:var(--icon-font-md);width:48px;height:48px;padding:16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--category-color) 10%,transparent);border-radius:var(--radius-lg);flex-shrink:0;line-height:1.2;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;-webkit-font-smoothing:antialiased}.category-info{flex:1}.category-info h3{color:var(--gray-800);font-size:1rem;font-weight:600;margin-bottom:.25rem}.category-count{color:var(--gray-500);font-size:.85rem}.category-arrow{width:20px;height:20px;color:var(--gray-400);flex-shrink:0}.categories-cta{text-align:center;margin-top:2rem}.btn-outline{display:inline-block;padding:.75rem 1.5rem;border:2px solid var(--primary);color:var(--primary);background:transparent;border-radius:var(--radius);font-weight:500;text-decoration:none;transition:background-color .2s ease,color .2s ease}.btn-outline:hover{background:var(--primary);color:var(--white)}.tools-cta{text-align:center;margin-top:2.5rem}.btn-load-more{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 2rem;background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--white);border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:var(--shadow-md)}.btn-load-more:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-load-more:active:not(:disabled){transform:translateY(0)}.btn-load-more:disabled{cursor:not-allowed;opacity:.8}.load-more-count{font-size:.85rem;font-weight:400;opacity:.9}.load-more-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.tool-card--fade-in{animation:tool-fade-in .4s ease-out forwards}@keyframes tool-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.tool-card--fade-in,.load-more-spinner{animation:none}}.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.hero-cta .btn-primary{background:var(--white);color:var(--primary)}.hero-cta .btn-primary:hover{background:var(--gray-100)}.hero-cta .btn-secondary{background:transparent;color:var(--white);border-color:var(--white)}.hero-cta .btn-secondary:hover{background:#ffffff1a}.favorite-tools-section{padding:var(--section-padding) 0;background:var(--white);border-bottom:1px solid var(--gray-100)}.favorite-tools-grid{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.favorite-tool-card{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--white);border-radius:50px;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;border:1px solid #fed7aa}.favorite-tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#f97316}.favorite-tool-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.favorite-tool-name{color:var(--gray-800);font-weight:500;font-size:.9rem;white-space:nowrap}.horizontal-scroll-wrapper{position:relative}.horizontal-scroll-wrapper:before,.horizontal-scroll-wrapper:after{content:"";position:absolute;top:0;bottom:.5rem;width:40px;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s ease}.horizontal-scroll-wrapper:before{left:0;background:linear-gradient(to right,var(--white),transparent)}.horizontal-scroll-wrapper:after{right:0;background:linear-gradient(to left,var(--white),transparent)}.horizontal-scroll-wrapper.can-scroll-left:before,.horizontal-scroll-wrapper.can-scroll-right:after{opacity:1}.scroll-indicator{display:none}@media (max-width: 768px){.favorite-tools-section{padding:var(--section-padding-mobile) 0}.favorite-tools-grid{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem;padding-left:var(--container-padding, 1rem);padding-right:var(--container-padding, 1rem);margin-left:calc(-1 * var(--container-padding, 1rem));margin-right:calc(-1 * var(--container-padding, 1rem));-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.favorite-tools-grid::-webkit-scrollbar{display:none}.favorite-tool-card{flex-shrink:0;scroll-snap-align:start}.favorite-tool-card:first-child{scroll-snap-align:start}.favorite-tool-card:last-child{scroll-snap-align:end}.scroll-indicator{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:.75rem;color:var(--gray-400);font-size:.75rem}.scroll-indicator svg{width:16px;height:16px;animation:scroll-hint 1.5s ease-in-out infinite}@keyframes scroll-hint{0%,to{transform:translate(0);opacity:.4}50%{transform:translate(4px);opacity:1}}}.recent-tools-section{padding:var(--section-padding) 0;background:var(--bg-secondary)}.section-title-icon{margin-right:.5rem}.recent-tools-grid{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.recent-tool-card{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--white);border-radius:50px;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;border:1px solid var(--gray-200)}.recent-tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary)}.recent-tool-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.recent-tool-name{color:var(--gray-800);font-weight:500;font-size:.9rem;white-space:nowrap}@media (max-width: 768px){.recent-tools-section{padding:var(--section-padding-mobile) 0}.recent-tools-grid{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem;padding-left:var(--container-padding, 1rem);padding-right:var(--container-padding, 1rem);margin-left:calc(-1 * var(--container-padding, 1rem));margin-right:calc(-1 * var(--container-padding, 1rem));-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.recent-tools-grid::-webkit-scrollbar{display:none}.recent-tool-card{flex-shrink:0;scroll-snap-align:start}.recent-tool-card:first-child{scroll-snap-align:start}.recent-tool-card:last-child{scroll-snap-align:end}}.tools-section{padding:var(--section-padding) 0;background:var(--white)}.section-title{text-align:center;font-size:2rem;margin-bottom:2.5rem;color:var(--gray-800)}.section-subtitle{display:block;font-size:.875rem;font-weight:400;color:var(--gray-500);margin-top:.5rem}[data-theme=dark] .section-subtitle{color:var(--gray-400)}.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:stretch;min-height:600px}.tool-card{position:relative;background:var(--white);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease;text-decoration:none;color:inherit;display:flex;flex-direction:column;min-height:280px}.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.tool-icon{width:60px;height:60px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:1.5rem}.tool-card h3{font-size:1.25rem;margin-bottom:.75rem;color:var(--gray-800)}.tool-card p{color:var(--gray-600);margin-bottom:1rem;font-size:.95rem;flex-grow:1}.tool-link{color:var(--primary);font-weight:500;display:flex;align-items:center;justify-content:center;gap:.25rem;margin-top:auto}.cta-section{padding:var(--section-padding) 0;background:var(--bg-secondary)}.cta-card{background:var(--gray-800);color:var(--white);border-radius:var(--radius-lg);padding:3rem;text-align:center}.cta-card h2{font-size:2rem;margin-bottom:1rem}.cta-card p{color:var(--gray-400);max-width:600px;margin:0 auto 1.5rem}@media (max-width: 1024px) and (min-width: 769px){.tools-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.categories-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.hero{padding:3rem 0}.hero h1{font-size:1.75rem;text-wrap:balance;padding:0 .5rem;max-width:320px;margin-left:auto;margin-right:auto}.hero-subtitle{font-size:1rem;padding:0 .5rem;text-align:center}.hero-stats{gap:1.5rem;flex-direction:column;align-items:center}.hero-stat{padding:.75rem;margin-bottom:.5rem}.hero-stat-number{font-size:1.75rem;padding:.75rem 0}.hero-stat-label{font-size:.875rem;margin-top:.5rem}.categories-grid{grid-template-columns:1fr}.category-card{padding:1.25rem}.category-icon{width:48px;height:48px;padding:16px;box-sizing:border-box;font-size:var(--icon-font-sm)}.tools-grid{grid-template-columns:1fr;gap:1.5rem}.tool-card p{font-size:1rem}.cta-card{padding:2rem 1.5rem}.cta-card h2{font-size:1.5rem}}.whats-new-section{padding:var(--section-padding) 0;background:var(--white);border-bottom:1px solid var(--gray-100)}.whats-new-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}.whats-new-card{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;border:1px solid transparent}.whats-new-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.whats-new-feature:hover{border-color:#6366f1}.whats-new-improvement:hover{border-color:#10b981}.whats-new-new:hover{border-color:#f59e0b}.whats-new-icon{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;background:var(--gray-100);border-radius:var(--radius);font-size:1.5rem}.whats-new-feature .whats-new-icon{background:linear-gradient(135deg,#eef2ff,#e0e7ff)}.whats-new-improvement .whats-new-icon{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}.whats-new-new .whats-new-icon{background:linear-gradient(135deg,#fffbeb,#fef3c7)}.whats-new-content{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch}.whats-new-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;min-height:1.5rem}.whats-new-badge{display:inline-block;padding:.2rem .5rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;border-radius:4px}.badge-feature{background:#eef2ff;color:#4f46e5}.badge-improvement{background:#ecfdf5;color:#059669}.badge-new{background:#fffbeb;color:#d97706}.whats-new-date{font-size:.8rem;color:var(--gray-700)}.whats-new-title{font-size:1rem;font-weight:600;color:var(--gray-800);margin-bottom:.375rem;line-height:1.2}.whats-new-description{font-size:.875rem;color:var(--gray-600);line-height:1.5;margin:0}@media (max-width: 768px){.whats-new-section{padding:var(--section-padding-mobile) 0}.whats-new-grid{grid-template-columns:1fr}.whats-new-card{padding:1rem}.whats-new-icon{width:40px;height:40px;min-width:40px;font-size:1.25rem}.whats-new-title,.whats-new-description{font-size:1rem}.whats-new-date{font-size:.875rem}}[data-theme=dark] .whats-new-section{background:var(--bg-primary);border-bottom-color:var(--border-color)}[data-theme=dark] .whats-new-card{background:var(--bg-secondary);border-color:var(--border-color)}[data-theme=dark] .whats-new-title{color:var(--text-primary)}[data-theme=dark] .whats-new-description{color:var(--text-secondary)}[data-theme=dark] .badge-feature{background:#6366f126}[data-theme=dark] .badge-improvement{background:#10b98126}[data-theme=dark] .badge-new{background:#f59e0b26}[data-theme=dark] .whats-new-feature .whats-new-icon{background:#6366f126}[data-theme=dark] .whats-new-improvement .whats-new-icon{background:#10b98126}[data-theme=dark] .whats-new-new .whats-new-icon{background:#f59e0b26}[data-theme=dark] .favorite-tools-section{background:var(--bg-primary);border-bottom-color:var(--border-color)}[data-theme=dark] .favorite-tool-card{background:var(--bg-secondary);border-color:#ea580c4d}[data-theme=dark] .favorite-tool-card:hover{border-color:#f97316}[data-theme=dark] .favorite-tool-name{color:var(--text-primary)}[data-theme=dark] .recent-tools-section{background:var(--bg-secondary)}[data-theme=dark] .recent-tool-card{background:var(--bg-secondary);border-color:var(--border-color)}[data-theme=dark] .recent-tool-card:hover{border-color:var(--primary)}[data-theme=dark] .recent-tool-name{color:var(--text-primary)}[data-theme=dark] .scroll-indicator{color:var(--gray-500)}[data-theme=dark] .horizontal-scroll-wrapper.favorites:before{background:linear-gradient(to right,rgba(234,88,12,.05),transparent)}[data-theme=dark] .horizontal-scroll-wrapper.favorites:after{background:linear-gradient(to left,rgba(234,88,12,.05),transparent)}[data-theme=dark] .horizontal-scroll-wrapper.recent:before{background:linear-gradient(to right,var(--bg-secondary),transparent)}[data-theme=dark] .horizontal-scroll-wrapper.recent:after{background:linear-gradient(to left,var(--bg-secondary),transparent)}.community-rating-section{padding:var(--section-padding) 0;background:var(--bg-secondary)}.community-rating-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;text-align:center;padding:2rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.community-rating-cta{font-size:1rem;color:var(--gray-600);margin:0;max-width:600px}[data-theme=dark] .tools-section{background:var(--bg-primary)}[data-theme=dark] .cta-section,[data-theme=dark] .community-rating-section{background:var(--bg-secondary)}[data-theme=dark] .community-rating-content{background:var(--bg-secondary);border-color:var(--border-color)}[data-theme=dark] .community-rating-cta{color:var(--text-secondary)}@media (max-width: 768px){.community-rating-section{padding:var(--section-padding-mobile) 0}.community-rating-content{padding:1.5rem}}.categories-hero{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;padding:4rem 0;text-align:center}.categories-breadcrumb{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.5rem;font-size:1rem}.categories-breadcrumb a{color:#fff;text-decoration:none;transition:color .2s}.categories-breadcrumb a:hover{color:#f0f0f0}.breadcrumb-separator{color:#fff}.categories-breadcrumb [aria-current=page]{color:#fff;font-weight:500}.categories-hero h1{font-size:2.5rem;margin-bottom:1rem;color:#fff}.categories-hero .hero-subtitle{font-size:1.25rem;opacity:.9;max-width:600px;margin:0 auto}.categories-grid-section{padding:4rem 0;background:var(--bg-color)}.categories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;row-gap:1.5rem}.category-card{background:#fff;border-radius:12px;padding:2rem;text-decoration:none;color:inherit;box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid #e5e7eb;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;cursor:pointer}.category-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--category-color);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}.category-card:hover{transform:translateY(-8px);box-shadow:0 20px 30px -5px #00000026,0 10px 15px -3px #0000001a;border-color:var(--category-color);scale:1}.category-card:hover:before{transform:scaleX(1);transition:transform .3s cubic-bezier(.4,0,.2,1) .05s}.category-card:focus{outline:none;box-shadow:0 20px 30px -5px #00000026,0 10px 15px -3px #0000001a,0 0 0 3px #4f46e51a;border-color:var(--category-color)}.category-card:focus-visible{outline:2px solid var(--category-color);outline-offset:2px}.category-card:active{transform:translateY(-4px)}@media (prefers-reduced-motion: reduce){.category-card{transition:none}.category-card:before{transition:none}.category-card:hover{transform:none}.category-card:hover:before{transition:none}.category-card:active{transform:none}}.category-icon{width:48px;height:48px;background:color-mix(in srgb,var(--category-color) 15%,white);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:var(--icon-font-md);padding:16px;box-sizing:border-box;margin-bottom:1rem;line-height:1;text-align:center;flex-shrink:0;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1)}.category-card:hover .category-icon{transform:translateY(-2px) scale(1.1);background:color-mix(in srgb,var(--category-color) 25%,white)}.category-card h2{font-size:1.25rem;margin-bottom:.5rem;color:var(--text-color)}.category-card p{color:var(--gray-600);font-size:.95rem;margin-bottom:1rem;line-height:1.5;flex-grow:1}.tool-count{display:inline-block;background:var(--category-color);color:#fff;padding:.35rem .75rem;border-radius:20px;font-size:.85rem;font-weight:500;margin-top:auto}@media (max-width: 768px){.categories-hero{padding:3rem 1rem}.categories-hero h1{font-size:2rem}.categories-grid-section{padding:2rem 1rem}.categories-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;row-gap:1.5rem}.category-card{padding:1.5rem;min-height:260px}.category-icon{width:48px;height:48px;padding:16px;box-sizing:border-box;font-size:var(--icon-font-sm);flex-shrink:0}}@media (max-width: 480px){.categories-grid{grid-template-columns:1fr;gap:1rem;row-gap:1rem}.category-card{padding:1.5rem;min-height:240px}}.category-hero{background:linear-gradient(135deg,var(--category-color) 0%,color-mix(in srgb,var(--category-color) 80%,black) 100%);color:#fff;padding:3rem 0 4rem}.category-breadcrumb-nav{margin-bottom:1.5rem}.category-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;gap:.5rem;font-size:.9rem}.category-breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:.5rem}.category-breadcrumb .breadcrumb-link{display:inline-flex;align-items:center;gap:.35rem;color:#ffffffe6;text-decoration:none;padding:.4rem .75rem;background:#ffffff26;border-radius:6px;transition:all .2s ease}.category-breadcrumb .breadcrumb-link:hover{background:#ffffff40;color:#fff}.category-breadcrumb .breadcrumb-link svg{flex-shrink:0}.category-breadcrumb .breadcrumb-separator{color:#fff9;font-weight:300}.category-breadcrumb .breadcrumb-current{color:#fff;font-weight:500;padding:.4rem .75rem;background:#ffffff40;border-radius:6px}@media (max-width: 768px){.category-breadcrumb{font-size:.85rem}.category-breadcrumb .breadcrumb-link,.category-breadcrumb .breadcrumb-current{padding:.35rem .6rem}}.category-header{text-align:center;max-width:700px;margin:0 auto}.category-icon-large{width:var(--icon-size-lg);height:var(--icon-size-lg);background:#fff3;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:var(--icon-font-lg);margin:0 auto 1.5rem;line-height:1.2;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;-webkit-font-smoothing:antialiased}.category-header h1{font-size:2.5rem;margin-bottom:1rem;color:#fff}.category-description{font-size:1.2rem;opacity:.95;margin-bottom:1.5rem;line-height:1.6}.tool-count-badge{display:inline-block;background:#ffffff40;color:#fff;padding:.5rem 1.25rem;border-radius:25px;font-size:1rem;font-weight:500}.category-tools-section{padding:4rem 0;background:var(--bg-color)}.category-tools-section .tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.category-tools-section .tool-card{background:#fff;border-radius:12px;padding:1.75rem;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--border-color);display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:pointer}.category-tools-section .tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--category-color);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}.category-tools-section .tool-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 30px -5px #00000026,0 10px 15px -3px #0000001a;border-color:var(--category-color)}.category-tools-section .tool-card:hover:before{transform:scaleX(1);transition:transform .3s cubic-bezier(.4,0,.2,1) .05s}.category-tools-section .tool-card:focus-visible{outline:2px solid var(--category-color);outline-offset:2px}@media (prefers-reduced-motion: reduce){.category-tools-section .tool-card{transition:none}.category-tools-section .tool-card:before{transition:none}.category-tools-section .tool-card:hover{transform:none}.category-tools-section .tool-card:hover:before{transition:none}}.category-tools-section .tool-card h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--text-color)}.category-tools-section .tool-card p{color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem;flex-grow:1}.category-tools-section .tool-link{color:var(--category-color);font-weight:500;font-size:.9rem;text-align:center;transition:transform .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1);display:inline-block}.category-tools-section .tool-card:hover .tool-link{transform:translate(4px);color:var(--category-color)}@media (prefers-reduced-motion: reduce){.category-tools-section .tool-link{transition:none}.category-tools-section .tool-card:hover .tool-link{transform:none}}.category-cta{padding:4rem 0;background:#fff}.category-cta .cta-card{text-align:center;padding:3rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;max-width:600px;margin:0 auto}.category-cta h2{font-size:1.5rem;margin-bottom:.75rem;color:var(--text-color)}.category-cta p{color:var(--text-secondary);margin-bottom:1.5rem}@media (max-width: 768px){.category-hero{padding:2rem 1rem 3rem}.category-header h1{font-size:2rem}.category-icon-large{width:80px;height:80px;font-size:2.5rem}.category-tools-section{padding:2rem 1rem}.category-tools-section .tools-grid{grid-template-columns:1fr}.category-cta{padding:2rem 1rem}.category-cta .cta-card{padding:2rem}}.contact-us-page{min-height:calc(100vh - 300px);padding:60px 0;background:linear-gradient(135deg,#667eea,#764ba2)}.contact-header{text-align:center;margin-bottom:60px;color:#fff}.contact-header h1{font-size:3rem;margin-bottom:1rem;font-weight:700}.contact-header p{font-size:1.25rem;opacity:.9}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1200px;margin:0 auto}.contact-info,.faq-section{background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 40px #0000001a}.contact-info h2,.faq-section h2{font-size:2rem;margin-bottom:1.5rem;color:#2d3748}.contact-info p{font-size:1.1rem;line-height:1.6;color:#4a5568;margin-bottom:1rem}.contact-methods{margin-top:2rem}.contact-method{margin-bottom:2rem;padding:1.5rem;background:#f7fafc;border-radius:8px;border-left:4px solid #667eea}.contact-method h3{font-size:1.25rem;margin-bottom:.75rem;color:#2d3748}.contact-method p{margin:0;font-size:1rem}.contact-method a{color:#667eea;text-decoration:none;font-weight:600;transition:color .2s}.contact-method a:hover{color:#764ba2;text-decoration:underline}.faq-item{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e2e8f0}.faq-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.faq-item h3{font-size:1.25rem;margin-bottom:.75rem;color:#2d3748}.faq-item p{font-size:1rem;line-height:1.6;color:#4a5568;margin:0}.faq-item a{color:#667eea;text-decoration:none;font-weight:600;transition:color .2s}.faq-item a:hover{color:#764ba2;text-decoration:underline}@media (max-width: 968px){.contact-content{grid-template-columns:1fr}.contact-header h1{font-size:2.25rem}.contact-info,.faq-section{padding:30px}}@media (max-width: 768px){.contact-us-page{padding:40px 0}.contact-header h1{font-size:2rem}.contact-header p{font-size:1.1rem}.contact-info h2,.faq-section h2{font-size:1.5rem}.contact-info,.faq-section{padding:24px}}.app{min-height:100vh;display:flex;flex-direction:column}.skip-to-content{position:absolute;top:-100px;left:50%;transform:translate(-50%);background:var(--primary-color, #4F46E5);color:#fff;padding:.75rem 1.5rem;border-radius:0 0 8px 8px;font-weight:600;text-decoration:none;z-index:10000;transition:top .2s ease}.skip-to-content:focus,.skip-to-content:focus-visible{top:0;outline:2px solid var(--primary-color, #4F46E5);outline-offset:2px}.skip-to-content:focus:not(:focus-visible){top:0}.main-content{flex:1 0 auto;display:flex;flex-direction:column;min-height:0;background-color:var(--gray-50)}.main-content>div{display:flex;flex-direction:column;flex:1}.main-content:focus{outline:none}[data-theme=dark] .main-content{background-color:var(--bg-primary, #1e293b)}.tool-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:1rem}.tool-loading p{color:var(--text-secondary, #666);font-size:1rem}.loading-spinner{width:48px;height:48px;border:4px solid var(--border-color, #e5e7eb);border-top-color:var(--primary-color, #6366f1);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}:root{--code-section-padding: 1.5rem;--code-section-margin-bottom: 2rem;--code-section-gap: 1rem;--code-block-padding: 1rem;--code-block-margin: 0;--code-header-margin-bottom: 1rem;--code-block-gap: 1rem;--collapsible-section-top-margin: 1.5rem;--collapsible-section-gap: 1rem;--code-line-height: 1.6;--code-font-size: .875rem}.code-output-section{background:#0f0f0f;border-radius:12px;padding:var(--code-section-padding);margin-bottom:var(--code-section-margin-bottom);border:2px solid #444;box-shadow:0 4px 12px #0006;border-left:4px solid var(--code-lang-accent, #3b82f6)}.code-output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--code-header-margin-bottom);padding:1rem 1.25rem;background:#14141499;border-radius:8px}.code-output-header h3{color:#f43f5e;font-size:1.1rem;margin:0;font-weight:600;letter-spacing:.02em}.code-block{background:#0d0d0d;border-radius:8px;padding:var(--code-block-padding);overflow-x:auto;font-family:Fira Code,Monaco,monospace;font-size:var(--code-font-size);color:#e0e0e0;margin:var(--code-block-margin);white-space:pre-wrap;line-height:var(--code-line-height)}.code-output-section+.code-output-section{margin-top:var(--code-section-gap)}.code-copy-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:#2563eb;border:1px solid #1e40af;border-radius:6px;color:#fff;cursor:pointer;transition:all .2s;font-size:.875rem;font-weight:500;white-space:nowrap;min-height:40px;justify-content:center}.code-copy-btn:hover{background:#1d4ed8;border-color:#1e3a8a;box-shadow:0 4px 12px #2563eb66}.code-copy-btn.copied{background:#10b981;border-color:#059669;color:#fff}.code-section-toggle{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#1e1e1e;border:2px solid #444;border-radius:8px;color:#e0e0e0;cursor:pointer;transition:all .2s;font-size:.875rem;width:100%;justify-content:center;margin-top:var(--collapsible-section-top-margin);margin-bottom:0;font-weight:500}.code-section-toggle:hover{background:#2a2a2a;border-color:#3b82f6;box-shadow:0 2px 8px #0000004d}.code-section-toggle.expanded{margin-bottom:var(--code-header-margin-bottom)}.code-section-content{background:#0f0f0f;border-radius:12px;padding:var(--code-section-padding);border:2px solid #444;border-left:4px solid var(--code-lang-accent, #3b82f6);margin-top:var(--code-header-margin-bottom);box-shadow:0 4px 12px #0006}.code-section-content .code-output-header{margin-bottom:var(--code-header-margin-bottom)}.code-section-content .code-block{max-height:600px;overflow-y:auto}.code-output,.output-container{display:flex;flex-direction:column;gap:var(--code-section-gap)}.output-block,.code-block-wrapper{background:#0f0f0f;border-radius:12px;overflow:hidden;border:2px solid #444;border-left:4px solid var(--code-lang-accent, #3b82f6);box-shadow:0 4px 12px #0006}.output-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#14141499;border-bottom:1px solid #333;gap:.5rem;flex-wrap:wrap}.output-header span{color:#e0e0e0;font-size:.9rem;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.copy-btn{padding:.625rem 1.25rem;background:#2563eb;border:1px solid #1e40af;border-radius:6px;color:#fff;font-size:.875rem;cursor:pointer;transition:all .2s;font-weight:500;white-space:nowrap;min-height:40px;display:flex;align-items:center;justify-content:center}.copy-btn:hover{background:#1d4ed8;border-color:#1e3a8a;box-shadow:0 4px 12px #2563eb66}.copy-btn.copied{background:#10b981;border-color:#059669;color:#fff}.output-block pre{margin:0;padding:1rem;overflow-x:auto;max-width:100%;background:#0d0d0d}.output-block code{font-family:Fira Code,Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;color:#e0e0e0;line-height:1.6;white-space:pre;display:block;max-width:100%}.code-output-section.html,.output-block.html{border-left-color:var(--code-html-accent)}.code-output-section.css,.output-block.css{border-left-color:var(--code-css-accent)}.code-output-section.javascript,.output-block.javascript,.code-output-section.js,.output-block.js{border-left-color:var(--code-js-accent)}.controls-panel,.generator-controls{border-left:4px solid var(--primary)!important;box-shadow:0 4px 12px #00000026!important}[data-theme=dark] .controls-panel,[data-theme=dark] .generator-controls{border-left:4px solid var(--primary)!important;box-shadow:0 8px 16px #0000004d!important}[data-theme=light] .controls-panel,[data-theme=light] .generator-controls{border-left:4px solid var(--primary)!important;box-shadow:0 2px 8px #00000014!important}[class*=-generator] .controls-panel,[class*=-generator] .generator-controls{border-left:4px solid var(--primary)!important;box-shadow:0 4px 12px #00000026!important}.input-section{background:#ffffff05;border:1px solid rgba(0,0,0,.05);border-radius:12px;padding:1rem;margin-bottom:1.5rem}.input-section:last-child{margin-bottom:0}[data-theme=dark] .input-section{background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}[data-theme=light] .input-section{background:#4f46e505;border:1px solid rgba(79,70,229,.08)}.controls-panel label,.generator-controls label,.controls-panel h3,.generator-controls h3,.controls-panel h4,.generator-controls h4{color:var(--gray-50)}[data-theme=light] .controls-panel label,[data-theme=light] .generator-controls label,[data-theme=light] .controls-panel h3,[data-theme=light] .generator-controls h3,[data-theme=light] .controls-panel h4,[data-theme=light] .generator-controls h4{color:var(--gray-900)}.controls-panel input,.controls-panel select,.controls-panel textarea,.generator-controls input,.generator-controls select,.generator-controls textarea{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:var(--gray-100)}.controls-panel input::placeholder,.generator-controls input::placeholder{color:var(--gray-500)}[data-theme=light] .controls-panel input,[data-theme=light] .controls-panel select,[data-theme=light] .controls-panel textarea,[data-theme=light] .generator-controls input,[data-theme=light] .generator-controls select,[data-theme=light] .generator-controls textarea{background:#00000008;border:1px solid var(--gray-300);color:var(--gray-900)}[data-theme=light] .controls-panel input::placeholder,[data-theme=light] .generator-controls input::placeholder{color:var(--gray-500)}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #4F46E5;--primary-dark: #4338CA;--primary-light: #818CF8;--primary-color: #4F46E5;--secondary: #7C3AED;--secondary-color: #7C3AED;--accent-color: #06B6D4;--cta-primary: #2563eb;--cta-primary-hover: #1d4ed8;--cta-primary-active: #1e40af;--cta-primary-shadow: rgba(37, 99, 235, .35);--cta-focus-ring: #93c5fd;--success: #10B981;--success-color: #10B981;--warning: #F59E0B;--warning-color: #F59E0B;--danger: #EF4444;--danger-color: #EF4444;--error-color: #EF4444;--info-color: #3B82F6;--gray-50: #F9FAFB;--gray-100: #F3F4F6;--gray-200: #E5E7EB;--gray-300: #D1D5DB;--gray-400: #9CA3AF;--gray-500: #6B7280;--gray-600: #4B5563;--gray-700: #374151;--gray-800: #1F2937;--gray-900: #111827;--white: #FFFFFF;--black: #000000;--bg-primary: #FFFFFF;--bg-secondary: #F9FAFB;--bg-tertiary: #F3F4F6;--bg-dark: #1F2937;--bg-darker: #111827;--background-color: #F9FAFB;--text-primary: #1F2937;--text-secondary: #4B5563;--text-tertiary: #6B7280;--text-muted: #9CA3AF;--text-light: #D1D5DB;--text-color: #1F2937;--text-dark: #111827;--border-color: #E5E7EB;--border-light: #F3F4F6;--border-dark: #D1D5DB;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--radius: 8px;--radius-sm: 4px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--border-radius: 8px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--section-padding: 4rem;--section-padding-mobile: 2.5rem;--section-gap: 0;--touch-target-min: 44px;--touch-target-mobile: 48px;--touch-target-comfortable: 56px;--tool-controls-width: 420px;--tool-controls-width-tablet: 360px;--tool-content-gap: 2rem;--tool-container-max-width: 1600px;--tool-container-padding: 2rem;--tool-controls-border: 2px solid var(--primary);--tool-controls-shadow: 0 4px 12px rgba(79, 70, 229, .15);--tool-preview-border: 2px solid var(--gray-700);--tool-preview-shadow: inset 0 2px 4px rgba(0, 0, 0, .1);--hero-section-padding: 2rem 2rem 2.5rem;--hero-section-margin-bottom: 2.5rem;--hero-section-bg: var(--white);--hero-section-border-bottom: 1px solid var(--gray-200);--workspace-section-padding: 0 2rem;--workspace-section-margin-bottom: 3rem;--workspace-max-width: 1600px;--features-section-padding: 3rem 2rem;--features-section-margin-top: 3rem;--features-section-bg: var(--gray-50);--features-section-border-top: 1px solid var(--gray-200);--related-tools-section-padding: 3rem 2rem;--related-tools-section-margin-top: 4rem;--related-tools-section-bg: var(--white);--related-tools-section-border-top: 1px solid var(--gray-200);--icon-size-sm: 48px;--icon-size-md: 48px;--icon-size-lg: 100px;--icon-font-sm: 1.5rem;--icon-font-md: 2rem;--icon-font-lg: 3rem;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--code-section-padding: 1.5rem;--code-section-margin-bottom: 1.5rem;--code-header-margin-bottom: 1rem;--code-block-padding: 1rem;--code-block-margin: 0;--code-font-size: .875rem;--code-line-height: 1.8;--code-section-gap: 2rem;--collapsible-section-top-margin: 1rem;--code-html-accent: #3b82f6;--code-css-accent: #a78bfa;--code-js-accent: #fbbf24;--code-html-accent-bg: rgba(59, 130, 246, .1);--code-css-accent-bg: rgba(167, 139, 250, .1);--code-js-accent-bg: rgba(251, 191, 36, .1)}[data-theme=dark]{--primary: #6366F1;--primary-dark: #4F46E5;--primary-light: #A5B4FC;--primary-color: #6366F1;--secondary: #A78BFA;--secondary-color: #A78BFA;--accent-color: #22D3EE;--cta-primary: #3b82f6;--cta-primary-hover: #2563eb;--cta-primary-active: #1d4ed8;--cta-primary-shadow: rgba(59, 130, 246, .4);--cta-focus-ring: #60a5fa;--success: #34D399;--success-color: #34D399;--warning: #FBBF24;--warning-color: #FBBF24;--danger: #F87171;--danger-color: #F87171;--error-color: #F87171;--info-color: #60A5FA;--gray-50: #111827;--gray-100: #1F2937;--gray-200: #374151;--gray-300: #4B5563;--gray-400: #6B7280;--gray-500: #9CA3AF;--gray-600: #D1D5DB;--gray-700: #E5E7EB;--gray-800: #F3F4F6;--gray-900: #F9FAFB;--white: #1F2937;--black: #FFFFFF;--bg-primary: #111827;--bg-secondary: #1F2937;--bg-tertiary: #374151;--bg-dark: #0F172A;--bg-darker: #030712;--background-color: #111827;--text-primary: #F9FAFB;--text-secondary: #D1D5DB;--text-tertiary: #9CA3AF;--text-muted: #6B7280;--text-light: #4B5563;--text-color: #F9FAFB;--text-dark: #FFFFFF;--border-color: #374151;--border-light: #1F2937;--border-dark: #4B5563;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow: 0 1px 3px 0 rgb(0 0 0 / .4), 0 1px 2px -1px rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .3);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .4), 0 8px 10px -6px rgb(0 0 0 / .3);--hero-section-bg: #1F2937;--hero-section-border-bottom: 1px solid #374151;--features-section-bg: #111827;--features-section-border-top: 1px solid #374151;--related-tools-section-bg: #1F2937;--related-tools-section-border-top: 1px solid #374151}body,.card,.tool-card,.category-card,.header,.footer,input,textarea,select,button,.btn{transition:background-color .3s ease,color .3s ease,border-color .3s ease}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role=button]:focus-visible,[role=link]:focus-visible,[role=option]:focus-visible{outline:3px solid var(--primary);outline-offset:3px;box-shadow:0 0 0 6px #4f46e540}[data-theme=dark] a:focus-visible,[data-theme=dark] button:focus-visible,[data-theme=dark] input:focus-visible,[data-theme=dark] select:focus-visible,[data-theme=dark] textarea:focus-visible,[data-theme=dark] [role=button]:focus-visible,[data-theme=dark] [role=link]:focus-visible,[data-theme=dark] [role=option]:focus-visible{outline:3px solid var(--primary);box-shadow:0 0 0 6px #6366f166}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.loading-spinner{animation:none!important;border-color:var(--primary-color, #6366f1)!important}.btn:hover,.card:hover,.tool-card:hover{transform:none!important}html{scroll-behavior:auto!important}}html{height:100%}body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--gray-50);color:var(--gray-800);line-height:1.6}#root{min-height:100vh;display:flex;flex-direction:column}.app{min-height:100vh;display:flex;flex-direction:column;flex:1 0 auto}.main-content{flex:1 0 auto;display:flex;flex-direction:column}.footer{flex-shrink:0;margin-top:auto}a{color:var(--primary);text-decoration:none;transition:all .2s ease;position:relative}a:hover{color:var(--primary-dark);text-decoration:underline}a:active{color:#3730a3}a,button,[role=button],input[type=button],input[type=submit],input[type=reset],select,[tabindex]:not([tabindex="-1"]){cursor:pointer;-webkit-user-select:none;user-select:none}button:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled=true]{opacity:.6;cursor:not-allowed}button:disabled:hover,input:disabled:hover,select:disabled:hover,textarea:disabled:hover{transform:none;box-shadow:none}*:focus:not(:focus-visible){outline:none}*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}a:focus-visible,button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--primary);outline-offset:1px;border-color:var(--primary)}.btn:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:3px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px #4f46e533}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all .2s ease;position:relative}.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-primary{background:var(--primary);color:var(--white);border-color:var(--primary)}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 0 0 4px #4f46e526}.btn-primary:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-secondary{background:var(--white);color:var(--gray-700);border:2px solid var(--gray-300)}.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-500);color:var(--gray-900)}.btn-secondary:active{background:var(--gray-100)}.btn-success{background:var(--success);color:var(--white);border-color:var(--success)}.btn-success:hover{background:#059669;border-color:#059669;box-shadow:0 0 0 4px #10b98126}.btn-success:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-danger{background:var(--danger);color:var(--white);border-color:var(--danger)}.btn-danger:hover{background:#dc2626;border-color:#dc2626;box-shadow:0 0 0 4px #ef444426}.btn-danger:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-xs{padding:.5rem 1rem;font-size:.75rem;font-weight:600;line-height:1.5}.btn-xs:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-xs:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-sm{padding:.75rem 1.25rem;font-size:.875rem;font-weight:600;line-height:1.5}.btn-sm:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-sm:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-md{padding:1rem 1.75rem;font-size:1rem;font-weight:600;line-height:1.5}.btn-md:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-md:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-lg{padding:1.25rem 2rem;font-size:1.125rem;font-weight:600;line-height:1.5}.btn-lg:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-lg:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-xl{padding:1.5rem 2.5rem;font-size:1.25rem;font-weight:600;line-height:1.5}.btn-xl:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-xl:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-cta{background:var(--primary);color:var(--white);border-color:var(--primary);padding:1rem 1.75rem;font-size:1rem;font-weight:600}.btn-cta:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 0 0 4px #4f46e526}.btn-cta:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-cta-lg{background:var(--primary);color:var(--white);border-color:var(--primary);padding:1.25rem 2rem;font-size:1.125rem;font-weight:600}.btn-cta-lg:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 0 0 4px #4f46e526}.btn-cta-lg:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.btn-icon{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:.5rem;font-size:1.25rem;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all .2s ease}.btn-icon:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-icon:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:12px 24px;font-size:1rem;font-weight:600;line-height:1.25;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.cta-btn:disabled{opacity:.6;cursor:not-allowed}.cta-btn-primary{background-color:var(--cta-primary);color:#fff;border-color:var(--cta-primary)}.cta-btn-primary:hover:not(:disabled){background-color:var(--cta-primary-hover);border-color:var(--cta-primary-hover);box-shadow:0 4px 12px var(--cta-primary-shadow);transform:translateY(-1px)}.cta-btn-primary:active:not(:disabled){background-color:var(--cta-primary-active);border-color:var(--cta-primary-active);transform:translateY(0)}.cta-btn-primary:focus-visible{outline:3px solid var(--cta-focus-ring);outline-offset:2px}.cta-btn-secondary{background-color:transparent;color:var(--text-primary);border-color:var(--border-dark)}.cta-btn-secondary:hover:not(:disabled){background-color:var(--gray-100);border-color:var(--gray-500);transform:translateY(-1px)}.cta-btn-secondary:active:not(:disabled){background-color:var(--gray-200);transform:translateY(0)}.cta-btn-secondary:focus-visible{outline:3px solid var(--cta-primary);outline-offset:2px}.cta-btn-tertiary{background-color:transparent;color:var(--cta-primary);border-color:transparent;padding:12px 16px}.cta-btn-tertiary:hover:not(:disabled){background-color:#2563eb14;color:var(--cta-primary-hover)}.cta-btn-tertiary:focus-visible{outline:3px solid var(--cta-primary);outline-offset:2px}.cta-btn-sm{min-height:36px;padding:8px 16px;font-size:.875rem}.cta-btn-lg{min-height:48px;padding:14px 28px;font-size:1.0625rem}.cta-btn-block{width:100%}.cta-btn svg{width:1.125em;height:1.125em;flex-shrink:0}@media (max-width: 767px){.cta-btn{min-height:48px}.cta-btn-sm{min-height:44px}.cta-btn-lg{min-height:52px}}.code-copy-btn,.copy-btn,[class*=-copy-btn],[class*=copy-button],[class*=copyBtn]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:10px 20px;background:var(--cta-primary, #2563eb);border:2px solid var(--cta-primary, #2563eb);border-radius:8px;color:#fff;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.code-copy-btn:hover,.copy-btn:hover,[class*=-copy-btn]:hover,[class*=copy-button]:hover,[class*=copyBtn]:hover{background:var(--cta-primary-hover, #1d4ed8);border-color:var(--cta-primary-hover, #1d4ed8);box-shadow:0 4px 12px var(--cta-primary-shadow, rgba(37, 99, 235, .35));transform:translateY(-1px)}.code-copy-btn:active,.copy-btn:active,[class*=-copy-btn]:active,[class*=copy-button]:active,[class*=copyBtn]:active{background:var(--cta-primary-active, #1e40af);border-color:var(--cta-primary-active, #1e40af);transform:translateY(0)}.code-copy-btn:focus-visible,.copy-btn:focus-visible,[class*=-copy-btn]:focus-visible,[class*=copy-button]:focus-visible,[class*=copyBtn]:focus-visible{outline:3px solid var(--cta-focus-ring, #93c5fd);outline-offset:2px}.code-copy-btn.copied,.copy-btn.copied,[class*=-copy-btn].copied,[class*=copy-button].copied,[class*=copyBtn].copied{background:var(--success, #10B981);border-color:var(--success, #10B981);color:#fff}.download-btn,[class*=-download-btn],[class*=download-button],[class*=downloadBtn]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:10px 20px;background:var(--cta-primary, #2563eb);border:2px solid var(--cta-primary, #2563eb);border-radius:8px;color:#fff;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease}.download-btn:hover,[class*=-download-btn]:hover,[class*=download-button]:hover,[class*=downloadBtn]:hover{background:var(--cta-primary-hover, #1d4ed8);border-color:var(--cta-primary-hover, #1d4ed8);box-shadow:0 4px 12px var(--cta-primary-shadow, rgba(37, 99, 235, .35));transform:translateY(-1px)}.download-btn:focus-visible,[class*=-download-btn]:focus-visible,[class*=download-button]:focus-visible,[class*=downloadBtn]:focus-visible{outline:3px solid var(--cta-focus-ring, #93c5fd);outline-offset:2px}.generate-btn,[class*=-generate-btn],[class*=export-btn],[class*=-export-btn]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:12px 28px;background:var(--cta-primary, #2563eb);border:2px solid var(--cta-primary, #2563eb);border-radius:8px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.generate-btn:hover,[class*=-generate-btn]:hover,[class*=export-btn]:hover,[class*=-export-btn]:hover{background:var(--cta-primary-hover, #1d4ed8);border-color:var(--cta-primary-hover, #1d4ed8);box-shadow:0 4px 12px var(--cta-primary-shadow, rgba(37, 99, 235, .35));transform:translateY(-1px)}.generate-btn:focus-visible,[class*=-generate-btn]:focus-visible,[class*=export-btn]:focus-visible,[class*=-export-btn]:focus-visible{outline:3px solid var(--cta-focus-ring, #93c5fd);outline-offset:2px}@media (max-width: 767px){.code-copy-btn,.copy-btn,[class*=-copy-btn],[class*=copy-button],[class*=copyBtn],.download-btn,[class*=-download-btn],[class*=download-button],[class*=downloadBtn]{min-height:48px}.generate-btn,[class*=-generate-btn],[class*=export-btn],[class*=-export-btn]{min-height:52px}}.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.5rem}.input-group{margin-bottom:1rem}.input-group label{display:block;margin-bottom:.5rem;font-weight:600;font-size:1rem;color:var(--gray-900);line-height:1.5;letter-spacing:.3px}label,.label,.input-label{display:block;font-weight:600;font-size:1rem;color:var(--gray-900);margin-bottom:.5rem;line-height:1.5;letter-spacing:.3px}.input-group input,.input-group textarea,.input-group select{width:100%;padding:.75rem;font-size:1rem;border:2px solid var(--gray-300);border-radius:var(--radius);transition:border-color .2s,box-shadow .2s,background-color .2s}.input-group input:hover:not(:disabled),.input-group textarea:hover:not(:disabled),.input-group select:hover:not(:disabled){border-color:var(--gray-400);background-color:var(--gray-50)}.input-group input:focus,.input-group textarea:focus,.input-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px #4f46e526,inset 0 0 0 1px var(--primary);background-color:var(--white)}.input-group textarea{min-height:100px;resize:vertical}.grid{display:grid;gap:1.5rem}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media (max-width: 768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.text-center{text-align:center}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:2rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:2rem}button,.btn,input[type=button],input[type=submit],input[type=reset],a.btn,[role=button]{min-height:44px;padding:12px 24px;font-weight:600;cursor:pointer;border:2px solid transparent;transition:all .2s ease}input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=number],input[type=date],input[type=time],textarea,select{border:2px solid var(--gray-300);padding:12px;min-height:44px;transition:all .2s ease}input[type=text]:hover,input[type=email]:hover,input[type=tel]:hover,input[type=url]:hover,input[type=password]:hover,input[type=number]:hover,input[type=date]:hover,input[type=time]:hover,textarea:hover,select:hover{border-color:var(--gray-500);background-color:var(--gray-50)}input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=password]:focus,input[type=number]:focus,input[type=date]:focus,input[type=time]:focus,textarea:focus,select:focus{border-color:var(--primary);outline:3px solid var(--primary);outline-offset:1px;box-shadow:0 0 0 5px #4f46e526;background-color:var(--white)}input[type=checkbox],input[type=radio]{min-width:20px;min-height:20px;cursor:pointer;accent-color:var(--primary)}input[type=checkbox]:hover,input[type=radio]:hover{opacity:.8}input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}[data-theme=dark] input[type=text],[data-theme=dark] input[type=email],[data-theme=dark] input[type=tel],[data-theme=dark] input[type=url],[data-theme=dark] input[type=password],[data-theme=dark] input[type=number],[data-theme=dark] input[type=date],[data-theme=dark] input[type=time],[data-theme=dark] textarea,[data-theme=dark] select{border-color:var(--border-color)}[data-theme=dark] input[type=text]:hover,[data-theme=dark] input[type=email]:hover,[data-theme=dark] input[type=tel]:hover,[data-theme=dark] input[type=url]:hover,[data-theme=dark] input[type=password]:hover,[data-theme=dark] input[type=number]:hover,[data-theme=dark] input[type=date]:hover,[data-theme=dark] input[type=time]:hover,[data-theme=dark] textarea:hover,[data-theme=dark] select:hover{border-color:var(--text-secondary);background-color:var(--bg-secondary)}[data-theme=dark] input[type=text]:focus,[data-theme=dark] input[type=email]:focus,[data-theme=dark] input[type=tel]:focus,[data-theme=dark] input[type=url]:focus,[data-theme=dark] input[type=password]:focus,[data-theme=dark] input[type=number]:focus,[data-theme=dark] input[type=date]:focus,[data-theme=dark] input[type=time]:focus,[data-theme=dark] textarea:focus,[data-theme=dark] select:focus{border-color:var(--primary);outline:3px solid var(--primary);outline-offset:1px;box-shadow:0 0 0 5px #6366f133;background-color:var(--bg-primary)}main,.tool-page,[class*=-generator],[class*=-calculator],[class*=-editor],[class*=-tool]{position:relative;z-index:1}[class*=-generator],[class*=-calculator],[class*=-editor],[class*=-tool]{height:auto!important;min-height:auto}[class*=-generator],[class*=-calculator],[class*=-editor],[class*=-tool]{display:flex;flex-direction:column;min-height:0;flex:1 0 auto}[class*=-sidebar],[class*=-controls],.controls-panel,.controls-section{flex-shrink:0;min-height:0;height:auto!important}[class*=-preview]:not([class*=button]):not([class*=icon]),[class*=-canvas],.preview-area,.preview-panel,.editor-area,[class*=-viewport]{flex:1 1 auto;min-height:0;overflow:auto;height:auto!important}[class*=-controls-panel],[class*=-control-section],.controls-panel,.control-section{flex-shrink:0;height:auto!important;max-height:none!important;overflow-y:auto}.control-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--gray-600)}.control-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.control-section h3{font-size:.875rem;font-weight:700;color:var(--gray-200);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.05em;text-transform:uppercase}[data-theme=dark] .control-section h3{color:var(--gray-100)}.control-group{margin-bottom:1.25rem;display:flex;flex-direction:column;gap:.5rem}.control-group:last-child{margin-bottom:0}.control-group label{display:block;color:var(--gray-300);font-size:.875rem;font-weight:500;line-height:1.4}[data-theme=dark] .control-group label{color:var(--gray-400)}.control-group input[type=text],.control-group input[type=number],.control-group input[type=email],.control-group input[type=url],.control-group input[type=password],.control-group select,.control-group textarea{min-height:44px;padding:.75rem 1rem;border-radius:8px;border:1px solid var(--gray-600);background:var(--gray-900);color:var(--gray-100);font-size:.9rem;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;width:100%}.control-group input:focus,.control-group select:focus,.control-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e533}.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.75rem}.preset-button,.preset-btn{min-height:44px;min-width:44px;padding:.75rem 1rem;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:500;cursor:pointer;border-radius:8px;border:1px solid var(--gray-600);background:var(--gray-800);color:var(--gray-200);transition:all .2s ease;text-align:center;line-height:1.3}.preset-button:hover,.preset-btn:hover,.preset-button:focus,.preset-btn:focus{border-color:var(--primary);background:#4f46e526;outline:none;transform:translateY(-1px)}.preset-button.active,.preset-btn.active{border-color:var(--primary);background:var(--primary);color:var(--white)}.control-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 480px){.control-row{grid-template-columns:1fr}}.color-input-group{display:flex;gap:.5rem;align-items:stretch}.color-input-group input[type=color]{width:44px;min-width:44px;height:44px;padding:4px;border:1px solid var(--gray-600);border-radius:8px;cursor:pointer;background:transparent}.color-input-group input[type=text]{flex:1;min-width:0}.checkbox-label,.radio-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;min-height:44px;padding:.5rem 0}.checkbox-label input[type=checkbox],.radio-label input[type=radio]{width:22px;height:22px;min-width:22px;accent-color:var(--primary);cursor:pointer}.checkbox-label span,.radio-label span{color:var(--gray-200);font-size:.9rem}.toggle-switch{position:relative;display:inline-flex;align-items:center;gap:.75rem;min-height:44px;cursor:pointer}.control-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--gray-600)}.control-actions button,.control-actions .btn{min-height:44px;flex:1;min-width:120px}.range-control{display:flex;flex-direction:column;gap:.5rem}.range-header{display:flex;justify-content:space-between;align-items:center}.range-value{font-size:.875rem;font-weight:600;color:var(--primary);min-width:48px;text-align:right}.controls-panel{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;background:var(--gray-800);border-radius:12px;border:2px solid var(--primary);box-shadow:0 4px 12px #4f46e526}@media (max-width: 767px){.control-section{margin-bottom:1.25rem;padding-bottom:1.25rem}.control-group{margin-bottom:1rem}.preset-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-button,.preset-btn{min-height:48px;font-size:.75rem;padding:.625rem}.controls-panel{padding:1rem;gap:1.25rem}}@media (max-width: 480px){.preset-grid{grid-template-columns:1fr 1fr}}[class*=-sidebar]{height:auto!important;min-height:auto!important;max-height:none!important}[class*=-sidebar],[class*=-container]:not(.app):not(.container),[class*=-wrapper]:not(.app){height:auto!important;min-height:auto!important}.copy-btn,button[class*=copy],.preset-item,.action-btn,.save-btn,.export-btn,.type-btn,.shape-btn,.angle-preset{position:relative;z-index:10}.css-output-section,.output-section,.css-block,.code-block,pre{position:relative;z-index:1}.css-block-header,.output-header{position:relative;z-index:15}.presets-list,.presets-grid,.preset-item,.sidebar-section,.presets-section{max-width:100%;box-sizing:border-box}[class*=-sidebar]{max-width:100%;overflow-x:hidden}.control-section,.controls-section,.angle-control{max-width:100%;overflow:hidden}input[type=range]{max-width:100%;box-sizing:border-box}button,.btn{overflow:hidden;text-overflow:ellipsis}select option{white-space:normal;word-wrap:break-word}.preset-name,.preset-desc{word-wrap:break-word;overflow-wrap:break-word}.css-code,.code-block,pre code{max-width:100%;overflow-x:auto}input.has-error,textarea.has-error,select.has-error,.input-error{border-color:var(--danger, #EF4444)!important;box-shadow:0 0 0 1px var(--danger, #EF4444)}input.has-error:focus,textarea.has-error:focus,select.has-error:focus,.input-error:focus{border-color:var(--danger, #EF4444)!important;box-shadow:0 0 0 2px #ef444433;outline:none}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.shake{animation:shake .5s ease-in-out}input.is-valid,textarea.is-valid,select.is-valid,.input-valid{border-color:var(--success, #10B981)!important}input.is-valid:focus,textarea.is-valid:focus,select.is-valid:focus,.input-valid:focus{box-shadow:0 0 0 2px #10b98133}[data-theme=dark] input.has-error,[data-theme=dark] textarea.has-error,[data-theme=dark] select.has-error,[data-theme=dark] .input-error{border-color:#f87171!important;box-shadow:0 0 0 1px #f87171}[data-theme=dark] input.has-error:focus,[data-theme=dark] textarea.has-error:focus,[data-theme=dark] select.has-error:focus,[data-theme=dark] .input-error:focus{box-shadow:0 0 0 2px #f871714d}[data-theme=dark] input.is-valid,[data-theme=dark] textarea.is-valid,[data-theme=dark] select.is-valid,[data-theme=dark] .input-valid{border-color:#34d399!important}@media print{*,*:before,*:after{background:#fff!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}.header,.footer,.tool-header-nav,.tool-header-actions,.skip-to-content,.scroll-to-top,.search-overlay,.keyboard-shortcuts-modal,.related-tools,.tool-footer,button:not(.print-include),.btn:not(.print-include),.whats-new-section,[class*=toast]{display:none!important}body{font-size:12pt;line-height:1.5;margin:0;padding:0}.app,.main-content,.container{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}.tool-header-title-row{display:block!important;padding:0 0 1rem;border-bottom:2px solid #000;margin-bottom:1rem}.tool-header-title{font-size:18pt;font-weight:700;margin:0 0 .5rem}.tool-header-description{font-size:11pt;color:#444!important}pre,code,.css-code,.code-block{background:#f5f5f5!important;border:1px solid #ddd!important;padding:.5rem!important;font-size:9pt!important;white-space:pre-wrap!important;word-wrap:break-word!important;overflow:visible!important;page-break-inside:avoid}table{border-collapse:collapse;width:100%}th,td{border:1px solid #000!important;padding:.25rem .5rem!important;text-align:left}th{background:#eee!important;font-weight:700}a[href^=http]:after{content:" (" attr(href) ")";font-size:9pt;color:#666!important}h1,h2,h3,h4,h5,h6{page-break-after:avoid;page-break-inside:avoid}img,table,pre,blockquote,.card{page-break-inside:avoid}.page-break-before{page-break-before:always}.card{border:1px solid #ddd!important;margin:1rem 0!important;padding:1rem!important}input[type=text],input[type=number],input[type=email],textarea,select{border:1px solid #999!important;background:#fff!important;padding:.25rem!important}@page{margin:1cm}}@media (max-width: 1023px){:root{--hero-section-padding: 1.5rem 1.5rem 2rem;--hero-section-margin-bottom: 2rem;--workspace-section-padding: 0 1.5rem;--workspace-section-margin-bottom: 2.5rem;--features-section-padding: 2.5rem 1.5rem;--features-section-margin-top: 2.5rem;--related-tools-section-padding: 2.5rem 1.5rem;--related-tools-section-margin-top: 3rem}}@media (max-width: 767px){:root{--hero-section-padding: 1rem 1rem 1.5rem;--hero-section-margin-bottom: 1.5rem;--workspace-section-padding: 0 1rem;--workspace-section-margin-bottom: 2rem;--features-section-padding: 2rem 1rem;--features-section-margin-top: 2rem;--related-tools-section-padding: 2rem 1rem;--related-tools-section-margin-top: 2.5rem}}@media (max-width: 480px){:root{--hero-section-padding: .75rem .75rem 1rem;--workspace-section-padding: 0 .75rem}}@media (max-width: 479px){button,.btn,a.btn,input[type=button],input[type=submit],input[type=reset],select,[role=button]{min-height:48px;min-width:48px;padding:14px 18px;font-size:16px}.btn-xs{padding:12px 14px;font-size:14px;min-height:44px}.btn-sm{padding:12px 16px;font-size:14px;min-height:44px}.btn-md{padding:14px 18px;font-size:16px;min-height:48px}.btn-lg{padding:16px 20px;font-size:16px;min-height:48px}.btn-xl{padding:18px 22px;font-size:18px;min-height:48px}.btn-cta{padding:14px 18px;font-size:16px;min-height:48px}.btn-cta-lg{padding:16px 20px;font-size:16px;min-height:48px}button+button,.btn+.btn{margin-top:14px}.preset-grid,.presets-grid,.ratios-grid{grid-template-columns:1fr!important}input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=number],input[type=date],input[type=time],textarea,select{min-height:48px;padding:14px;font-size:16px}input[type=checkbox],input[type=radio]{min-width:28px;min-height:28px}input[type=range]{height:48px;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{width:32px;height:32px;-webkit-appearance:none}input[type=range]::-moz-range-thumb{width:32px;height:32px}.container,.tool-container,.page-container{padding:12px}a,[role=link]{min-height:24px;display:inline-block}.icon-btn,.icon-button,[class*=icon-btn]{min-width:48px;min-height:48px;padding:12px}.tab,.tab-button,[role=tab]{min-height:48px;padding:12px 16px}.toggle,.switch,[type=checkbox][role=switch]{min-width:48px;min-height:28px}.dropdown-trigger,.select-trigger,[aria-haspopup=true],.preset-item,.preset-card,.option-card{min-height:48px;padding:12px}}@media (min-width: 480px) and (max-width: 767px){button,.btn,a.btn,input[type=button],input[type=submit],input[type=reset],select,[role=button]{min-height:44px;min-width:44px;padding:12px 16px}.btn-xs{padding:10px 14px;font-size:.75rem;min-height:44px}.btn-sm{padding:11px 15px;font-size:.875rem;min-height:44px}.btn-md{padding:12px 18px;font-size:1rem;min-height:44px}.btn-lg{padding:13px 20px;font-size:1.125rem;min-height:44px}.btn-xl{padding:14px 22px;font-size:1.125rem;min-height:44px}.btn-cta{padding:12px 18px;font-size:1rem;min-height:44px}.btn-cta-lg{padding:13px 20px;font-size:1.125rem;min-height:44px}button+button,.btn+.btn{margin-top:12px}input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=number],input[type=date],input[type=time],textarea,select{min-height:44px;padding:12px;font-size:16px}input[type=checkbox],input[type=radio]{min-width:24px;min-height:24px}input[type=range]{height:44px;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{width:28px;height:28px;-webkit-appearance:none}input[type=range]::-moz-range-thumb{width:28px;height:28px}a,[role=link]{min-height:20px;display:inline-block}.icon-btn,.icon-button,[class*=icon-btn]{min-width:44px;min-height:44px;padding:10px}.tab,.tab-button,[role=tab]{min-height:44px;padding:10px 14px}.toggle,.switch,[type=checkbox][role=switch]{min-width:44px;min-height:24px}.dropdown-trigger,.select-trigger,[aria-haspopup=true],.preset-item,.preset-card,.option-card{min-height:44px;padding:10px}}@media (max-width: 767px){.two-column,.grid-2,.split-layout,.cfg-layout,.tool-layout-two-col,.tool-layout,.generator-layout,.editor-layout{grid-template-columns:1fr!important;flex-direction:column!important}[class*=-layout],[class*=-container][style*=grid-template-columns],.layout-with-sidebar,.sidebar-layout{grid-template-columns:1fr!important}[class*=-sidebar],.sidebar,.tool-sidebar{width:100%!important;max-width:100%!important;position:static!important;height:auto!important;max-height:none!important}body,html{overflow-x:hidden}.container,.tool-container,.page-container{padding:16px}pre,code,.code-block,.css-output,.code-output{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}pre::-webkit-scrollbar,code::-webkit-scrollbar,.code-block::-webkit-scrollbar{height:8px}pre::-webkit-scrollbar-track,code::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track{background:var(--gray-100)}pre::-webkit-scrollbar-thumb,code::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:4px}h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.25rem}p,li{line-height:1.6}table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}img{max-width:100%;height:auto}.card,.tool-card{padding:1rem;margin-bottom:1rem}.button-group,.btn-group,.action-buttons{flex-wrap:wrap;gap:8px}pre{padding:12px;font-size:14px;line-height:1.6;border-radius:var(--radius);position:relative}code{font-size:14px}.code-header,.css-block-header,.output-header{flex-wrap:wrap;gap:8px;padding:10px 12px}.copy-btn,.copy-code-btn,button[class*=copy]{min-width:44px;min-height:44px;padding:12px 18px;font-weight:600}.css-output-section,.output-section,.code-output-section{margin:12px 0}.code-block pre{padding:12px;border-radius:var(--radius)}}@media (min-width: 768px) and (max-width: 1023px){.container{padding:24px}button,.btn,select{min-height:40px}}@media (min-width: 1024px){.container{padding:32px}}input[type=range]{width:100%;cursor:pointer;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--gray-300);border:none}input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--gray-300);border:none}input[type=range]::-ms-track{height:6px;border-radius:3px;background:var(--gray-300);border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;margin-top:-7px;box-shadow:0 2px 4px #0003;transition:transform .15s ease,box-shadow .15s ease}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 2px 4px #0003;transition:transform .15s ease,box-shadow .15s ease}input[type=range]::-ms-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 2px 4px #0003}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 3px 6px #0000004d}input[type=range]:hover::-moz-range-thumb{transform:scale(1.1);box-shadow:0 3px 6px #0000004d}input[type=range]:focus{outline:none}input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--primary);outline-offset:2px}input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--primary);outline-offset:2px}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 4px 8px #00000059}input[type=range]:active::-moz-range-thumb{transform:scale(1.15);box-shadow:0 4px 8px #00000059}[data-theme=dark] input[type=range]::-webkit-slider-runnable-track{background:var(--gray-600)}[data-theme=dark] input[type=range]::-moz-range-track{background:var(--gray-600)}input[type=range]:disabled{opacity:.5;cursor:not-allowed}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed;background:var(--gray-400)}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed;background:var(--gray-400)}.error-message{display:flex;align-items:center;gap:6px;color:var(--danger-color);font-size:.875rem;margin-top:4px;line-height:1.4}.error-message .error-icon{flex-shrink:0;width:16px;height:16px;color:var(--danger-color)}.error-message .error-text{flex:1}.validated-field{margin-bottom:16px}.validated-field.has-error input,.validated-field.has-error textarea,.validated-field.has-error select{border-color:var(--danger-color)}.validated-field.has-error input:focus,.validated-field.has-error textarea:focus,.validated-field.has-error select:focus{outline-color:var(--danger-color);box-shadow:0 0 0 3px #ef44441a}.validated-field-label{display:block;font-weight:500;margin-bottom:6px;color:var(--text-primary)}.required-indicator{color:var(--danger-color);margin-left:2px}.field-hint{font-size:.875rem;color:var(--text-tertiary);margin-top:4px}.error-summary{background:#fef2f2;border:1px solid #FCA5A5;border-radius:var(--radius);padding:16px;margin-bottom:24px}[data-theme=dark] .error-summary{background:#ef44441a;border-color:#ef44444d}.error-summary-title{display:flex;align-items:center;gap:8px;color:var(--danger-color);font-size:1rem;font-weight:600;margin-bottom:12px}.error-summary-list{list-style:none;margin:0;padding:0}.error-summary-list li{margin-bottom:8px}.error-summary-list li:last-child{margin-bottom:0}.error-summary-link{color:var(--danger-color);text-decoration:none}.error-summary-link:hover{text-decoration:underline}[data-theme=dark]{--tool-bg-light: var(--bg-secondary);--tool-bg-card: var(--bg-primary)}[data-theme=dark] .controls-panel,[data-theme=dark] .preview-panel,[data-theme=dark] .output-section,[data-theme=dark] .preview-section,[data-theme=dark] .cfg-section,[data-theme=dark] .tool-content,[data-theme=dark] [class*=-section]:not(.cta-section):not([class*=hero]),[data-theme=dark] [class*=-panel],[data-theme=dark] [class*=-card]:not(.cta-section){background:var(--bg-secondary);border-color:var(--border-color)}[data-theme=dark] input[type=text],[data-theme=dark] input[type=number],[data-theme=dark] input[type=email],[data-theme=dark] input[type=url],[data-theme=dark] input[type=password],[data-theme=dark] textarea,[data-theme=dark] select{background:var(--bg-primary);color:var(--text-primary);border-color:var(--border-color)}[data-theme=dark] input[type=text]::placeholder,[data-theme=dark] input[type=number]::placeholder,[data-theme=dark] input[type=email]::placeholder,[data-theme=dark] input[type=url]::placeholder,[data-theme=dark] input[type=password]::placeholder,[data-theme=dark] textarea::placeholder{color:var(--text-muted)}[data-theme=dark] .option-btn,[data-theme=dark] .preset-btn,[data-theme=dark] .type-btn,[data-theme=dark] .style-btn,[data-theme=dark] [class*=-btn]:not(.btn-primary):not(.cta-btn):not(.add-btn):not(.copy-btn){background:var(--bg-tertiary);border-color:var(--border-color);color:var(--text-secondary)}[data-theme=dark] .option-btn:hover,[data-theme=dark] .preset-btn:hover,[data-theme=dark] .type-btn:hover,[data-theme=dark] .style-btn:hover{background:var(--border-color);color:var(--text-primary)}[data-theme=dark] .option-btn.active,[data-theme=dark] .type-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}[data-theme=dark] .item-row,[data-theme=dark] .item-card,[data-theme=dark] [class*=-item]{background:var(--bg-tertiary)}[data-theme=dark] .preview-container,[data-theme=dark] .preview-area,[data-theme=dark] [class*=-preview]:not([class*=-preview-]){background:var(--bg-tertiary);border-color:var(--border-color)}[data-theme=dark] .best-practices,[data-theme=dark] .tips-section,[data-theme=dark] .info-section,[data-theme=dark] .feature-cards,[data-theme=dark] [class*=-tips],[data-theme=dark] [class*=-info]{background:var(--bg-secondary)}[data-theme=dark] .practice-card,[data-theme=dark] .tip-card,[data-theme=dark] .info-card,[data-theme=dark] .feature-card{background:var(--bg-primary)}[data-theme=dark] .code-output,[data-theme=dark] .code-block,[data-theme=dark] .css-output,[data-theme=dark] pre{background:var(--gray-900)}[data-theme=dark] .code-block code,[data-theme=dark] .code-output code,[data-theme=dark] pre code{color:#fff}[data-theme=dark] .code-tabs,[data-theme=dark] [class*=-code-tabs]{background:var(--bg-darker);border-color:var(--border-color)}[data-theme=dark] .code-tab{color:var(--gray-300)}[data-theme=dark] .code-tab.active,[data-theme=dark] .code-language-label{color:#fff}[data-theme=dark] .control-section,[data-theme=dark] [class*=-control]{border-color:var(--border-color)}[data-theme=dark] .control-section h3,[data-theme=dark] [class*=-section] h3,[data-theme=dark] [class*=-panel] h3,[data-theme=dark] .control-row label,[data-theme=dark] [class*=-label]{color:var(--text-primary)}[data-theme=dark] .tool-header p,[data-theme=dark] [class*=-description],[data-theme=dark] [class*=-hint],[data-theme=dark] [class*=-subtitle]{color:var(--text-secondary)}[data-theme=dark] .color-input input[type=color],[data-theme=dark] [class*=-color-input] input[type=color]{border-color:var(--border-color)}[data-theme=dark] .item-actions button,[data-theme=dark] [class*=-actions] button{background:var(--bg-secondary);color:var(--text-secondary);border-color:var(--border-color)}[data-theme=dark] .item-actions button:hover:not(:disabled),[data-theme=dark] [class*=-actions] button:hover:not(:disabled){background:var(--border-color);color:var(--text-primary)}[data-theme=dark] .toggle,[data-theme=dark] [class*=-toggle]:not(.toggle-theme){background:var(--border-color)}[data-theme=dark] .toggle.active,[data-theme=dark] [class*=-toggle].active{background:var(--primary-color)}[data-theme=dark] input[type=range]{background:var(--border-color)}[data-theme=dark] .stat-item,[data-theme=dark] [class*=-stat],[data-theme=dark] .history-item,[data-theme=dark] [class*=-history]{background:var(--bg-tertiary)}[data-theme=dark] .file-upload-area,[data-theme=dark] .upload-zone,[data-theme=dark] [class*=-upload]{background:var(--bg-secondary);border-color:var(--border-color)}[data-theme=dark] .data-uri-section,[data-theme=dark] .data-uri-box,[data-theme=dark] [class*=-uri]{background:var(--bg-tertiary);border-color:var(--border-color)}[data-theme=dark] .tool-header h1,[data-theme=dark] [class*=-header] h1{color:var(--text-primary)}[data-theme=dark] ::-webkit-scrollbar-track{background:var(--bg-secondary)}[data-theme=dark] ::-webkit-scrollbar-thumb{background:var(--border-color)}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}[data-theme=dark] .tool-content{background:var(--bg-primary)!important}[data-theme=dark] .modal,[data-theme=dark] .dialog,[data-theme=dark] [class*=-modal],[data-theme=dark] [class*=-dialog]{background:var(--bg-primary);border-color:var(--border-color)}[data-theme=dark] .grid-container,[data-theme=dark] [class*=-grid]:not([class*=grid-template]){background:var(--bg-secondary)}[data-theme=dark] [class*=-box]:not([class*=checkbox]){background:var(--bg-tertiary);border-color:var(--border-color)}[data-theme=dark] .tab,[data-theme=dark] [class*=-tab]:not(.active):not(.code-tab){background:var(--bg-tertiary);color:var(--text-secondary)}[data-theme=dark] .tab.active,[data-theme=dark] [class*=-tab].active:not(.code-tab.active){background:var(--bg-primary);color:var(--text-primary)}[data-theme=dark] .empty-state,[data-theme=dark] .placeholder,[data-theme=dark] .no-history,[data-theme=dark] [class*=-empty],[data-theme=dark] [class*=-placeholder]{background:var(--bg-tertiary);color:var(--text-secondary)}[data-theme=dark] .option-toggle,[data-theme=dark] [class*=-toggle-option]{background:var(--bg-tertiary)}[data-theme=dark] .option-toggle.active,[data-theme=dark] [class*=-toggle-option].active{background:#3b82f626}[data-theme=dark] .field-group,[data-theme=dark] .form-group,[data-theme=dark] [class*=-field],[data-theme=dark] [class*=-group]:not([class*=button-group]):not([class*=action]){border-color:var(--border-color)}[data-theme=dark] .dropdown,[data-theme=dark] .dropdown-menu,[data-theme=dark] [class*=-dropdown]{background:var(--bg-primary);border-color:var(--border-color)}[data-theme=dark] .list-item,[data-theme=dark] [class*=-list-item]{background:var(--bg-tertiary);border-color:var(--border-color)}[data-theme=dark] .pane-header,[data-theme=dark] .card-header,[data-theme=dark] [class*=-header]:not(.tool-header){background:var(--bg-secondary);border-color:var(--border-color)}[data-theme=dark] .copy-small,[data-theme=dark] [class*=-copy]:not(.copy-btn):not(.copy-code-btn):not(button[class*=copy]):not(.export-btn[class*=copy]){background:var(--bg-primary);border-color:var(--border-color);color:var(--text-primary)}[data-theme=dark] .copy-small:hover{background:var(--bg-tertiary)}.code-output{background:var(--gray-800);border-radius:8px;overflow:hidden;margin-top:2rem;border:1px solid var(--gray-700)}.code-section-title{font-size:1rem;font-weight:600;color:var(--white);margin:0;padding:1rem 1rem .5rem;border-bottom:1px solid var(--gray-700)}.code-tabs-container{display:flex;align-items:center;background:var(--gray-900);padding:.75rem;gap:1rem;border-bottom:1px solid var(--gray-700)}.code-tabs{display:flex;gap:.25rem;flex:1}.code-tab{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:transparent;border:1px solid transparent;color:var(--gray-300);font-size:.875rem;cursor:pointer;border-radius:6px;transition:all .2s;font-weight:500;position:relative}.code-tab:hover{color:var(--gray-200);background:var(--gray-800)}.code-tab.active{background:var(--gray-800);color:#fff;border-color:var(--gray-700)}.code-tab-icon{font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center}.code-tab .html-icon{color:#ff6b6b}.code-tab .css-icon{color:#4ecdc4}.code-tab .js-icon{color:#ffd93d}.code-tab.active .html-icon{color:#ff6b6b}.code-tab.active .css-icon{color:#4ecdc4}.code-tab.active .js-icon{color:#ffd93d}.code-tab-label{letter-spacing:.3px}.copy-btn{padding:.875rem 1.75rem;background:var(--primary-color);border:none;color:var(--white);font-size:1rem;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.copy-btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.copy-btn:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.copy-btn,.copy-code-btn,button[class*=copy],.export-btn[class*=copy]{background:var(--primary);color:var(--white);border:2px solid transparent;padding:1rem 1.75rem;font-weight:600;font-size:1rem;box-shadow:0 2px 4px #4f46e526;transition:all .2s ease;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius);cursor:pointer}.copy-btn:hover,.copy-code-btn:hover,button[class*=copy]:hover,.export-btn[class*=copy]:hover{background:var(--primary-dark);box-shadow:0 4px 8px #4f46e540;transform:translateY(-2px)}.copy-btn:active,.copy-code-btn:active,button[class*=copy]:active,.export-btn[class*=copy]:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.copy-btn:disabled,.copy-code-btn:disabled,button[class*=copy]:disabled,.export-btn[class*=copy]:disabled{opacity:.6;cursor:not-allowed;transform:none}[data-theme=dark] .copy-btn,[data-theme=dark] .copy-code-btn,[data-theme=dark] button[class*=copy],[data-theme=dark] .export-btn[class*=copy]{background:var(--primary);box-shadow:0 2px 4px #6366f133}[data-theme=dark] .copy-btn:hover,[data-theme=dark] .copy-code-btn:hover,[data-theme=dark] button[class*=copy]:hover,[data-theme=dark] .export-btn[class*=copy]:hover{box-shadow:0 4px 8px #6366f14d}[data-theme=dark] .btn-xs,[data-theme=dark] .btn-sm,[data-theme=dark] .btn-md,[data-theme=dark] .btn-lg,[data-theme=dark] .btn-xl{transition:all .2s ease}[data-theme=dark] .btn-xs:hover,[data-theme=dark] .btn-sm:hover,[data-theme=dark] .btn-md:hover,[data-theme=dark] .btn-lg:hover,[data-theme=dark] .btn-xl:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}[data-theme=dark] .btn-xs:active,[data-theme=dark] .btn-sm:active,[data-theme=dark] .btn-md:active,[data-theme=dark] .btn-lg:active,[data-theme=dark] .btn-xl:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}[data-theme=dark] .btn-cta,[data-theme=dark] .btn-cta-lg{background:var(--primary);color:var(--white);border-color:var(--primary)}[data-theme=dark] .btn-cta:hover,[data-theme=dark] .btn-cta-lg:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 0 0 4px #6366f140}[data-theme=dark] .btn-cta:active,[data-theme=dark] .btn-cta-lg:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}[data-theme=dark] .btn-icon{transition:all .2s ease}[data-theme=dark] .btn-icon:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}[data-theme=dark] .btn-icon:active{transform:translateY(0);box-shadow:inset 0 2px 4px #00000026}.code-block-wrapper{position:relative}.code-language-label{font-size:.75rem;color:#fff;background:#181b26;padding:.5rem 1rem;border-bottom:1px solid var(--gray-700);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.code-block{padding:1.25rem;margin:0;overflow-x:auto;max-height:400px;background:var(--gray-800)}.code-block code{color:#fff;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.6;white-space:pre}.preview-section h3,.generator-results h3,.output-section h3,.preview-container h3{font-size:1.1rem;font-weight:700;padding:1rem 0;border-bottom:2px solid var(--primary);margin-bottom:1rem;color:var(--gray-100);letter-spacing:.03em}.preview-section,.generator-results,.output-section,.preview-container{background:var(--gray-800);border:1px solid var(--gray-700);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 1px 3px #0000001a}.preview-area{background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-200) 100%);border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.5rem;margin:1rem 0;min-height:120px}[data-theme=dark] .preview-area{background:linear-gradient(135deg,var(--gray-700) 0%,var(--gray-800) 100%);border-color:var(--gray-600)}.preview-section.preview-updating,.generator-results.preview-updating,.preview-container.preview-updating{background-color:#4f46e50d;border-color:var(--primary);animation:preview-update-pulse .4s ease-out}@keyframes preview-update-pulse{0%{opacity:1;box-shadow:0 0 0 3px #4f46e54d}to{opacity:1;box-shadow:0 0 #4f46e500}}[data-theme=dark] .preview-section.preview-updating,[data-theme=dark] .generator-results.preview-updating,[data-theme=dark] .preview-container.preview-updating{background-color:#6366f114;border-color:var(--primary)}.preview-label,.generator-results>h3:before,.preview-section>h3:before{display:inline-block;padding:.25rem .75rem;background:var(--primary);color:var(--white);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-right:.5rem}.output-section{margin-top:1.5rem}.output-section h3{margin-bottom:1rem}.code-output-section,.code-preview{background:var(--gray-900);border:1px solid var(--gray-700);border-radius:var(--radius);padding:1rem;overflow-x:auto;max-height:400px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem}.output-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#33415580;border-bottom:1px solid var(--gray-700);gap:.5rem;flex-wrap:wrap}.output-header span{color:var(--gray-400);font-size:.85rem;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tool-container{max-width:var(--tool-container-max-width, 1600px);margin:0 auto;padding:var(--tool-container-padding, 2rem);width:100%}.tool-content{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:var(--tool-content-gap, 2rem)}.tool-controls-panel{background:var(--gray-800);border:var(--tool-controls-border);border-radius:var(--radius-lg);box-shadow:var(--tool-controls-shadow);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;height:fit-content}.tool-preview-panel{background:linear-gradient(135deg,var(--gray-900) 0%,var(--gray-800) 100%);border:var(--tool-preview-border);border-radius:var(--radius-lg);box-shadow:var(--tool-preview-shadow);padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.tool-section-header{font-size:1.15rem;font-weight:700;color:var(--gray-100);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}@media (max-width: 1023px){.tool-content{grid-template-columns:var(--tool-controls-width-tablet, 360px) 1fr}}@media (max-width: 767px){.tool-container{padding:1rem}.tool-content{grid-template-columns:1fr}.tool-controls-panel,.tool-preview-panel{padding:1rem}}[data-theme=dark] .tool-controls-panel{background:var(--bg-secondary);border-color:var(--primary);box-shadow:0 4px 12px #6366f133}[data-theme=dark] .tool-preview-panel{background:linear-gradient(135deg,var(--bg-darker) 0%,var(--bg-secondary) 100%);border-color:var(--border-color)}.accordion-items-container,.preview-items-list,.preview-accordion{display:flex;flex-direction:column;gap:.75rem}.accordion-items-container.spacing-lg,.preview-items-list.spacing-lg,.preview-accordion.spacing-lg{gap:1rem}@media (max-width: 768px){.preview-section h3,.generator-results h3,.output-section h3,.preview-container h3{font-size:1rem;padding:.75rem 0;margin-bottom:.75rem}.preview-section,.generator-results,.output-section,.preview-container{padding:1rem}.preview-area{padding:1rem;min-height:100px;margin:.75rem 0}.accordion-items-container,.preview-items-list,.preview-accordion{gap:1rem}}@media (max-width: 1279px){[class*=-generator] .generator-layout,[class*=-tool] .tool-layout,.tool-content-grid{grid-template-columns:minmax(300px,360px) 1fr!important}[class*=-generator] .code-panel,[class*=-tool] .code-panel{grid-column:1 / -1}}@media (max-width: 1023px){[class*=-generator] .generator-layout,[class*=-tool] .tool-layout,.tool-content-grid{grid-template-columns:minmax(280px,var(--tool-controls-width-tablet)) 1fr!important}}@media (max-width: 899px){[class*=-generator] .generator-layout,[class*=-tool] .tool-layout,.tool-content-grid{grid-template-columns:1fr!important}}@media (max-width: 768px){[class*=-generator] .generator-layout,[class*=-tool] .tool-layout,.tool-content-grid{gap:1.5rem}.controls-panel,[class*=-controls-panel]{padding:1.25rem}[class*=-type-grid],[class*=-style-grid]{grid-template-columns:repeat(3,1fr);gap:.5rem}}@media (max-width: 767px){[class*=-generator],[class*=-calculator],[class*=-editor],[class*=-tool]{padding:1rem}[class*=-generator] .generator-layout,[class*=-tool] .tool-layout,.tool-content-grid,.workspace-grid,.content-layout{grid-template-columns:1fr!important;gap:1.5rem}}@media (max-width: 479px){[class*=-generator],[class*=-calculator],[class*=-editor],[class*=-tool]{padding:.75rem}[class*=-generator] .generator-layout,[class*=-tool] .tool-layout{gap:1rem}}@supports (height: 100dvh){.modal-overlay,.modal-container,.dialog-overlay{height:100dvh;max-height:100dvh}.fixed-container,.sticky-header,.fixed-footer{max-height:100svh}}@supports not (height: 100dvh){.modal-overlay,.modal-container,.dialog-overlay{height:100vh;max-height:-webkit-fill-available}}@media (min-width: 900px){.controls-panel,[class*=-controls-panel],[class*=-sidebar]{max-height:none;overflow-y:auto;overflow-x:hidden}}@media (max-width: 899px){.controls-panel,[class*=-controls-panel],[class*=-sidebar]{max-height:none!important;height:auto!important;overflow-y:visible}}[class*=-generator],[class*=-calculator],[class*=-editor],[class*=-tool],.tool-container,.tool-wrapper{max-width:100%;width:100%}*{max-width:100vw;box-sizing:border-box}[class*=-generator],[class*=-calculator],[class*=-converter],[class*=-tool],[class*=-designer],[class*=-editor]{--section-gap-standard: 2rem;--section-margin-bottom: 2rem;--preview-area-padding: 1.5rem}.tool-wrapper,[class*=-wrapper],[class*=-container]:not(.container){padding:var(--tool-container-padding, 2rem);max-width:var(--tool-container-max-width, 1600px);margin:0 auto}.controls-panel,[class*=-controls],[class*=-sidebar]:not(.sidebar){display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;background:var(--bg-secondary, var(--gray-800));border-radius:12px;border:2px solid var(--primary);box-shadow:0 4px 12px #4f46e526}.control-section,[class*=-section]:not(.section):not(.tips-section):not(.cta-section):not(.preview-section):not(.output-section){margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color, var(--gray-200))}.control-section:last-child,[class*=-section]:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.control-section h3,[class*=-section] h3:not(.preview-section h3):not(.output-section h3){font-size:.9375rem;font-weight:700;color:var(--text-primary, var(--gray-200));margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em;text-transform:uppercase}.preview-section,.preview-area,[class*=-preview]{background:var(--bg-secondary, var(--gray-100));border:2px solid var(--info-color, #3B82F6);border-radius:12px;padding:var(--preview-area-padding, 1.5rem);margin-bottom:var(--section-margin-bottom, 2rem)}.preview-section h3,.preview-area h3,[class*=-preview-header] h3{font-size:.9375rem;font-weight:600;color:var(--info-color, #3B82F6);margin:0 0 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--info-color, #3B82F6);display:flex;align-items:center;gap:.5rem}.output-section,.code-output,[class*=-output]{background:var(--bg-secondary, var(--gray-800));border-radius:12px;padding:1.5rem;margin-bottom:var(--section-margin-bottom, 2rem);border:1px solid var(--border-color, var(--gray-700))}.cta-btn,.copy-btn,.generate-btn,.export-btn,.download-btn,[class*=-copy-btn],[class*=-export-btn],[class*=-generate-btn],[class*=-action-btn]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;padding:10px 20px;background:var(--cta-primary, #2563eb);border:2px solid var(--cta-primary, #2563eb);border-radius:8px;color:#fff;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.cta-btn:hover,.copy-btn:hover,.generate-btn:hover,.export-btn:hover,.download-btn:hover,[class*=-copy-btn]:hover,[class*=-export-btn]:hover,[class*=-generate-btn]:hover,[class*=-action-btn]:hover{background:var(--cta-primary-hover, #1d4ed8);border-color:var(--cta-primary-hover, #1d4ed8);box-shadow:0 4px 12px var(--cta-primary-shadow, rgba(37, 99, 235, .35));transform:translateY(-1px)}.cta-btn:focus-visible,.copy-btn:focus-visible,.generate-btn:focus-visible,.export-btn:focus-visible,.download-btn:focus-visible{outline:3px solid var(--cta-focus-ring, #93c5fd);outline-offset:2px}.btn-secondary,[class*=-secondary-btn]{background:transparent;border:2px solid var(--gray-300);color:var(--text-primary, var(--gray-700));min-height:44px}.btn-secondary:hover,[class*=-secondary-btn]:hover{border-color:var(--cta-primary, #2563eb);color:var(--cta-primary, #2563eb);background:#2563eb0d}.control-group label,.form-group label,[class*=-field] label,[class*=-input-group] label{display:block;font-size:.8125rem;font-weight:500;color:var(--text-secondary, var(--gray-600));margin-bottom:.5rem}.control-group input,.control-group select,.control-group textarea,.form-group input,.form-group select,.form-group textarea{width:100%;min-height:44px;padding:.625rem .875rem;font-size:.9375rem;border:1px solid var(--border-color, var(--gray-300));border-radius:8px;background:var(--bg-primary, var(--white));color:var(--text-primary);transition:border-color .2s ease,box-shadow .2s ease}.control-group input:focus,.control-group select:focus,.control-group textarea:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--cta-primary, #2563eb);box-shadow:0 0 0 3px #2563eb1a}.control-group,.form-group{margin-bottom:1rem}.control-group:last-child,.form-group:last-child{margin-bottom:0}.preset-grid,.presets-grid,[class*=-preset-grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.75rem}.preset-button,.preset-btn,[class*=-preset-btn]{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.75rem .875rem;background:var(--bg-tertiary, var(--gray-100));border:2px solid transparent;border-radius:8px;color:var(--text-secondary, var(--gray-600));font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s ease}.preset-button:hover,.preset-btn:hover,[class*=-preset-btn]:hover{background:var(--bg-secondary);border-color:var(--gray-300);transform:translateY(-1px)}.preset-button.active,.preset-btn.active,[class*=-preset-btn].active{background:var(--primary);border-color:var(--primary);color:#fff}.related-tools{margin-top:var(--related-tools-section-margin-top, 4rem)!important;padding:var(--related-tools-section-padding, 3rem 2rem);border-top:var(--related-tools-section-border-top, 1px solid var(--border-light, #e5e7eb))}@media (max-width: 1023px){.tool-wrapper,[class*=-wrapper],[class*=-container]:not(.container){padding:1.5rem}.controls-panel,[class*=-controls],[class*=-sidebar]:not(.sidebar){padding:1.25rem;gap:1.25rem}}@media (max-width: 767px){.tool-wrapper,[class*=-wrapper],[class*=-container]:not(.container){padding:1rem}.controls-panel,[class*=-controls],[class*=-sidebar]:not(.sidebar){padding:1rem;gap:1rem}.cta-btn,.copy-btn,.generate-btn,.export-btn,.download-btn{min-height:48px;font-size:1rem;padding:12px 24px}.preset-button,.preset-btn,[class*=-preset-btn]{min-height:48px;padding:.875rem 1rem}.related-tools{margin-top:2.5rem!important;padding:2rem 1rem}.preview-section,.preview-area,[class*=-preview],.output-section,.code-output,[class*=-output]{padding:1rem;margin-bottom:1.5rem}}@media (max-width: 479px){.tool-wrapper,[class*=-wrapper],[class*=-container]:not(.container){padding:.75rem}.preset-grid,.presets-grid,[class*=-preset-grid]{grid-template-columns:repeat(2,1fr);gap:.5rem}.related-tools{margin-top:2rem!important;padding:1.5rem 1rem}.related-tools-grid{grid-template-columns:1fr}}[data-theme=dark] .control-section h3,[data-theme=dark] [class*=-section] h3{color:var(--gray-200);border-bottom-color:var(--primary-light, #818CF8)}[data-theme=dark] .preview-section,[data-theme=dark] .preview-area,[data-theme=dark] [class*=-preview]{background:var(--gray-800);border-color:var(--info-color, #3B82F6)}[data-theme=dark] .output-section,[data-theme=dark] .code-output,[data-theme=dark] [class*=-output]{background:var(--gray-900);border-color:var(--gray-700)}[data-theme=dark] .controls-panel,[data-theme=dark] [class*=-controls],[data-theme=dark] [class*=-sidebar]:not(.sidebar){background:#1f2937f2;border:2px solid var(--gray-400);border-radius:6px}[data-theme=dark] .preset-button,[data-theme=dark] .preset-btn,[data-theme=dark] [class*=-preset-btn]{background:var(--gray-700);color:var(--gray-200)}[data-theme=dark] .preset-button:hover,[data-theme=dark] .preset-btn:hover,[data-theme=dark] [class*=-preset-btn]:hover{background:var(--gray-600);border-color:var(--gray-500)}[data-theme=dark] .control-group input,[data-theme=dark] .control-group select,[data-theme=dark] .control-group textarea,[data-theme=dark] .form-group input,[data-theme=dark] .form-group select,[data-theme=dark] .form-group textarea{background:var(--gray-900);border-color:var(--gray-600);color:var(--gray-100)}[data-theme=dark] .control-group input:focus,[data-theme=dark] .control-group select:focus,[data-theme=dark] .control-group textarea:focus,[data-theme=dark] .form-group input:focus,[data-theme=dark] .form-group select:focus,[data-theme=dark] .form-group textarea:focus{border-color:var(--info-color, #3B82F6);box-shadow:0 0 0 3px #3b82f633}[data-theme=dark] .control-section{background-color:#1f2937e6!important;border:2px solid var(--gray-400)!important;border-radius:6px!important}[data-theme=dark] input[type=text],[data-theme=dark] input[type=number],[data-theme=dark] input[type=range],[data-theme=dark] input[type=date],[data-theme=dark] input[type=color],[data-theme=dark] input[type=email],[data-theme=dark] select,[data-theme=dark] textarea{border-width:2px!important;border-color:var(--gray-500)!important}[data-theme=dark] button,[data-theme=dark] .btn,[data-theme=dark] [role=button]{border-width:2px!important}[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] textarea{background-color:#0f172ad9!important}[data-theme=dark] label{color:var(--gray-200)!important;font-weight:500}