:root{--bg: #fafaf9;--bg-card: #ffffff;--bg-card-hover: #fff5f5;--bg-input: #f5f5f4;--text: #1a1a1a;--text-muted: #6b6b6b;--text-inverse: #ffffff;--accent: #dc2626;--accent-light: #fee2e2;--accent-dark: #991b1b;--accent-glow: rgba(220, 38, 38, .15);--border: #e5e5e5;--border-hover: #dc2626;--success: #16a34a;--error: #dc2626;--warning: #f59e0b;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 60px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);--shadow-hover: 0 4px 16px rgba(220,38,38,.12), 0 8px 32px rgba(0,0,0,.08);--shadow-elevated: 0 20px 60px rgba(0,0,0,.15);--font-sans: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg: #0f0f0f;--bg-card: #1a1a1a;--bg-card-hover: #261a1a;--bg-input: #222222;--text: #f0f0f0;--text-muted: #888888;--accent: #ef4444;--accent-light: #3b1111;--accent-dark: #fca5a5;--accent-glow: rgba(239, 68, 68, .2);--border: #2a2a2a;--shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);--shadow-hover: 0 4px 16px rgba(239,68,68,.2), 0 8px 32px rgba(0,0,0,.3);--shadow-elevated: 0 20px 60px rgba(0,0,0,.5)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh;transition:background var(--transition-smooth),color var(--transition-smooth);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--accent);text-decoration:none;transition:opacity var(--transition-fast)}a:hover{opacity:.8}h1,h2,h3,h4{font-family:var(--font-sans);line-height:1.2}code,pre,.mono{font-family:var(--font-mono)}img{max-width:100%;display:block}button{font-family:var(--font-sans);cursor:pointer}input,textarea,select{font-family:var(--font-mono);color:var(--text)}::selection{background:var(--accent);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.header{display:flex;align-items:center;justify-content:space-between;padding:20px var(--space-xl);border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 85%,transparent)}.logo{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-weight:700;font-size:1.3rem;color:var(--text);text-decoration:none;cursor:pointer;transition:transform var(--transition-fast)}.logo:hover{transform:scale(1.02);opacity:1}.logo-icon{width:36px;height:36px;background:var(--accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;font-weight:700;transition:transform var(--transition-base)}.logo:hover .logo-icon{transform:rotate(-5deg) scale(1.05)}.header-right{display:flex;align-items:center;gap:var(--space-md)}.search-trigger{display:flex;align-items:center;gap:var(--space-sm);padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-muted);font-family:var(--font-mono);font-size:.85rem;cursor:pointer;transition:all var(--transition-base)}.search-trigger:hover{border-color:var(--accent)}.kbd{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-size:.7rem;font-family:var(--font-mono)}.theme-toggle{width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--transition-base);color:var(--text)}.theme-toggle:hover{border-color:var(--accent);background:var(--accent-light)}.hero{text-align:center;padding:var(--space-2xl) var(--space-xl) var(--space-lg)}.hero h1{font-size:2.8rem;font-weight:700;letter-spacing:-1px;margin-bottom:12px}.hero h1 .accent{color:var(--accent)}.hero p{color:var(--text-muted);font-size:1.1rem;max-width:500px;margin:0 auto;line-height:1.6}.tool-count-badge{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-md);padding:6px 14px;background:var(--accent-light);color:var(--accent);border-radius:var(--radius-xl);font-family:var(--font-mono);font-size:.85rem;font-weight:600}.categories{display:flex;justify-content:center;gap:10px;padding:var(--space-lg) var(--space-xl);flex-wrap:wrap}.cat-btn{padding:8px 18px;border-radius:var(--radius-xl);border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-family:var(--font-sans);font-size:.85rem;cursor:pointer;transition:all var(--transition-base)}.cat-btn:hover,.cat-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.grid-container{max-width:1200px;margin:0 auto;padding:var(--space-lg) var(--space-xl) var(--space-2xl)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.tool-page-wrapper{max-width:900px;margin:0 auto;padding:var(--space-lg) var(--space-xl) var(--space-2xl);animation:fadeInUp .35s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.tool-back-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all var(--transition-base);margin-bottom:var(--space-lg)}.tool-back-btn:hover{border-color:var(--accent);color:var(--accent)}.tool-header{margin-bottom:var(--space-lg)}.tool-header h1{font-size:1.8rem;font-weight:700;margin-bottom:var(--space-sm)}.tool-header .tool-description{color:var(--text-muted);font-size:1rem}.tool-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow)}.footer{text-align:center;padding:30px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.85rem}.footer a{color:var(--accent);text-decoration:none}.search-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:500;display:none;align-items:flex-start;justify-content:center;padding-top:15vh;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.search-overlay.active{display:flex}.search-palette{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:560px;box-shadow:var(--shadow-elevated);overflow:hidden;animation:fadeInUp .2s ease}.search-palette input{width:100%;padding:16px 20px;border:none;background:transparent;font-size:1rem;outline:none;color:var(--text);border-bottom:1px solid var(--border)}.search-palette input::placeholder{color:var(--text-muted)}.search-results{max-height:360px;overflow-y:auto}.search-result-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background var(--transition-fast);border-bottom:1px solid var(--border)}.search-result-item:last-child{border-bottom:none}.search-result-item:hover,.search-result-item.selected{background:var(--accent-light)}.search-result-item .result-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}.search-result-item .result-name{font-weight:600;font-size:.9rem}.search-result-item .result-desc{color:var(--text-muted);font-size:.78rem}@media(max-width:768px){.header{padding:16px 20px}.hero{padding:var(--space-xl) 20px 10px}.hero h1{font-size:2rem}.grid-container{padding:20px}.tools-grid{grid-template-columns:1fr}.search-trigger{display:none}.tool-page-wrapper{padding:var(--space-md) 20px var(--space-xl)}.tool-content{padding:var(--space-md)}}@media(max-width:480px){.hero h1{font-size:1.6rem}.categories{padding:var(--space-md) 20px}}.tool-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;cursor:pointer;transition:all var(--transition-smooth);box-shadow:var(--shadow);position:relative;overflow:hidden;text-decoration:none;color:var(--text);display:block}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transition:transform var(--transition-smooth)}.tool-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);border-color:var(--accent);background:var(--bg-card-hover)}.tool-card:hover:before{transform:scaleX(1)}.tool-card:active{transform:translateY(-2px)}.tool-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:var(--space-md);background:var(--accent-light);color:var(--accent);font-family:var(--font-mono);font-weight:700}.tool-card h3{font-size:1.05rem;font-weight:600;margin-bottom:var(--space-sm)}.tool-card p{color:var(--text-muted);font-size:.88rem;line-height:1.5}.tool-tag{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.7rem;background:var(--accent-light);color:var(--accent);text-transform:lowercase}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:10px 20px;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:600;font-size:.88rem;cursor:pointer;transition:all var(--transition-base);border:none;white-space:nowrap}.btn-primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}.btn-primary:hover{background:var(--accent-dark);transform:scale(1.02);box-shadow:0 4px 12px var(--accent-glow)}.btn-secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}.btn-sm{padding:6px 14px;font-size:.8rem}.btn-group{display:flex;gap:10px;flex-wrap:wrap}.textarea-field{width:100%;min-height:200px;padding:var(--space-md);border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-family:var(--font-mono);font-size:.9rem;resize:vertical;outline:none;transition:border-color var(--transition-base);line-height:1.6}.textarea-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.input-field{width:100%;padding:10px var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-family:var(--font-mono);font-size:.9rem;outline:none;transition:border-color var(--transition-base)}.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.select-field{padding:10px var(--space-md);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-input);color:var(--text);font-family:var(--font-mono);font-size:.9rem;outline:none;cursor:pointer;transition:border-color var(--transition-base)}.select-field:focus{border-color:var(--accent)}.tool-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.tool-split-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--space-sm)}.tool-section{margin-bottom:var(--space-lg)}.tool-section:last-child{margin-bottom:0}.tool-section-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--space-sm)}.tool-row{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.tool-inline-group{display:flex;align-items:center;gap:var(--space-sm)}.toggle-group{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.toggle-btn{padding:8px 16px;background:var(--bg-card);color:var(--text-muted);border:none;font-family:var(--font-sans);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-base)}.toggle-btn.active{background:var(--accent);color:#fff}.toggle-btn:not(:last-child){border-right:1px solid var(--border)}#toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column-reverse;gap:8px}.toast{display:flex;align-items:center;gap:var(--space-sm);padding:12px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);font-size:.88rem;animation:toastIn .3s ease,toastOut .3s ease 2.5s forwards;min-width:200px}.toast.success{border-left:3px solid var(--success)}.toast.error{border-left:3px solid var(--error)}@keyframes toastIn{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(40px)}}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:10px var(--space-md);border-radius:var(--radius-md);font-size:.85rem;font-family:var(--font-mono)}[data-theme=dark] .error-message{background:#3b1111;border-color:#5c1a1a;color:#fca5a5}.cheatsheet{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);max-height:300px;overflow-y:auto}.cheatsheet-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:.82rem;cursor:pointer;transition:background var(--transition-fast)}.cheatsheet-item:last-child{border-bottom:none}.cheatsheet-item:hover{background:var(--accent-light);margin:0 calc(-1 * var(--space-md));padding-left:var(--space-md);padding-right:var(--space-md)}.cheatsheet-item code{color:var(--accent);font-weight:600}.match-highlight{background:var(--accent-light);color:var(--accent);border-radius:3px;padding:1px 2px;font-weight:600}.color-preview-box{width:100%;height:80px;border-radius:var(--radius-md);border:1px solid var(--border);transition:background var(--transition-base)}.color-swatch{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:transform var(--transition-fast)}.color-swatch:hover{transform:scale(1.1)}.recent-colors{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-sm)}.uuid-list{display:flex;flex-direction:column;gap:var(--space-sm)}.uuid-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg-input);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.88rem}.uuid-item button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;transition:color var(--transition-fast)}.uuid-item button:hover{color:var(--accent)}.conversion-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.85rem}.conversion-table th,.conversion-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}.conversion-table th{color:var(--text-muted);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.conversion-table tr:hover td{background:var(--accent-light)}@media(max-width:768px){.tool-split{grid-template-columns:1fr}.tool-row{flex-direction:column;align-items:stretch}.btn-group{flex-direction:column}.btn-group .btn{width:100%;justify-content:center}}