:root{--primary:#18a05b;--primary-light:#22c55e;--primary-bg:#18a05b14;--bg:#f8f9fb;--bg-dark:#1a1a2e;--sidebar-bg:#fff;--sidebar-width:280px;--card-bg:#fff;--card-border:#e8eaed;--text:#1a1d23;--text-secondary:#5f6672;--text-muted:#9aa1ad;--input-bg:#fff;--input-border:#d1d5db;--input-focus:#18a05b;--hover-bg:#f3f5f7;--radius:10px;--radius-sm:6px;--shadow:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000012, 0 1px 3px #0000000a;--shadow-lg:0 8px 24px #00000014, 0 2px 6px #00000008;--transition:.2s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}.app-layout{min-height:100vh;display:flex}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--card-border);z-index:100;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--card-border);background:linear-gradient(135deg,#f0fdf4 0%,#f8fdf6 100%);padding:0}.sidebar-header a{transition:opacity var(--transition);display:block}.sidebar-header a:hover{opacity:.85}.sidebar-header h1{color:var(--primary);font-size:20px;font-weight:700}.sidebar-header p{color:var(--text-secondary);margin-top:4px;font-size:12px}.sidebar-search{border-bottom:1px solid var(--card-border);padding:14px 16px}.sidebar-search input{border:1px solid var(--input-border);border-radius:var(--radius);width:100%;transition:all var(--transition);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239aa1ad' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") no-repeat 12px center;outline:none;padding:9px 12px 9px 36px;font-size:13px}.sidebar-search input:focus{border-color:var(--input-focus);background-color:var(--input-bg);box-shadow:0 0 0 3px #18a05b1a}.sidebar-nav{flex:1;padding:8px 0;overflow-y:auto}.sidebar-category{padding:0}.sidebar-category-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition);align-items:center;gap:8px;padding:12px 16px 6px;font-size:11px;font-weight:700;display:flex}.sidebar-category-title:hover{color:var(--primary)}.sidebar-tool{color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border-left:3px solid #0000;align-items:center;gap:10px;margin:1px 0;padding:7px 16px 7px 28px;font-size:13px;text-decoration:none;display:flex}.sidebar-tool:hover{background:var(--hover-bg);color:var(--text)}.sidebar-tool.active{background:var(--primary-bg);color:var(--primary);border-left-color:var(--primary);font-weight:600}.sidebar-tool-icon{text-align:center;width:20px;font-size:16px}.top-bar{border-bottom:1px solid var(--card-border);background:var(--card-bg);justify-content:flex-end;align-items:center;padding:10px 24px;display:flex}.language-select{border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--card-bg);color:var(--text);cursor:pointer;appearance:none;transition:all var(--transition);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235f6672' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;outline:none;padding:6px 28px 6px 10px;font-size:13px}.language-select:hover{border-color:var(--primary)}.language-select:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px #18a05b1a}.main-content{margin-left:var(--sidebar-width);flex:1;min-height:100vh}.page-header{background:var(--card-bg);border-bottom:1px solid var(--card-border);padding:28px 32px}.page-header h2{letter-spacing:-.01em;font-size:22px;font-weight:700}.page-header p{color:var(--text-secondary);margin-top:6px;font-size:14px;line-height:1.5}.page-body{max-width:1200px;padding:28px 32px}.home-hero{text-align:center;border-radius:var(--radius);border:1px solid var(--card-border);background:linear-gradient(145deg,#f0fdf4 0%,#ecfdf5 40%,#f0fdfa 100%);margin-bottom:36px;padding:52px 24px 44px;position:relative;overflow:hidden}.home-hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#18a05b0f 0%,#0000 70%);border-radius:50%;width:400px;height:400px;position:absolute;top:-60%;right:-20%}.home-hero p{color:var(--text-secondary);max-width:520px;margin:0 auto;font-size:15px;line-height:1.6}.home-count{letter-spacing:.02em;margin-top:12px;font-weight:500;color:var(--text-muted)!important;font-size:13px!important}.home-categories{margin-bottom:40px}.home-category h2{border-bottom:2px solid var(--primary);letter-spacing:-.01em;margin-bottom:16px;padding-bottom:10px;font-size:17px;font-weight:700;display:inline-block}.home-tools-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;display:grid}.home-tool-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);color:inherit;transition:all var(--transition);align-items:flex-start;gap:14px;padding:18px;text-decoration:none;display:flex}.home-tool-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.home-tool-icon{background:var(--primary-bg);border-radius:var(--radius-sm);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:26px;display:flex}.home-tool-name{color:var(--text);margin-bottom:4px;font-size:14px;font-weight:600}.home-tool-desc{color:var(--text-secondary);font-size:12.5px;line-height:1.45}.home-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.tool-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);color:inherit;padding:22px;text-decoration:none;display:block}.tool-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-3px)}.tool-card-icon{margin-bottom:12px;font-size:28px}.tool-card-title{margin-bottom:6px;font-size:15px;font-weight:600}.tool-card-desc{color:var(--text-secondary);font-size:13px;line-height:1.5}.tool-panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;padding:22px}.tool-panel-title{color:var(--text);letter-spacing:-.01em;margin-bottom:14px;font-size:14px;font-weight:600}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:13px;font-weight:500;display:block}.form-input,.form-textarea,.form-select{border:1px solid var(--input-border);border-radius:var(--radius);background:var(--input-bg);width:100%;color:var(--text);outline:none;padding:10px 12px;font-family:inherit;font-size:14px;transition:border-color .2s}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--input-focus)}.form-textarea{resize:vertical;min-height:100px;font-family:SF Mono,Fira Code,Fira Mono,monospace;font-size:13px;line-height:1.6}.form-select{cursor:pointer}.btn{border:1px solid var(--input-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);background:var(--card-bg);color:var(--text);align-items:center;gap:6px;padding:9px 18px;font-size:13px;font-weight:500;display:inline-flex}.btn:hover{background:var(--hover-bg);border-color:#bcc1ca}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 1px 2px #18a05b33}.btn-primary:hover{background:var(--primary-light);border-color:var(--primary-light);transform:translateY(-1px);box-shadow:0 2px 6px #18a05b40}.btn-sm{padding:4px 10px;font-size:12px}.btn-group{flex-wrap:wrap;gap:8px;display:flex}.result-box .copy-btn{position:absolute;top:8px;right:8px}.tool-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.tool-grid-full{grid-column:1/-1}.tool-table{border-collapse:collapse;width:100%;font-size:13px}.tool-table th,.tool-table td{text-align:left;border-bottom:1px solid var(--card-border);padding:8px 12px}.tool-table th{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;font-size:12px;font-weight:600}.tool-table tr:hover td{background:var(--hover-bg)}.tag{color:var(--text-secondary);background:#e5e7eb;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:500;display:inline-block}.tag-green{color:#166534;background:#dcfce7}.tag-blue{color:#1e40af;background:#dbeafe}.tag-red{color:#991b1b;background:#fee2e2}@media (width<=768px){.sidebar{transition:transform .3s;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0}.tool-grid{grid-template-columns:1fr}.page-body{padding:16px}.home-grid{grid-template-columns:1fr}}.home-category{margin-bottom:32px}.home-category-title{border-bottom:2px solid var(--primary);margin-bottom:16px;padding-bottom:8px;font-size:18px;font-weight:700;display:inline-block}.toggle{cursor:pointer;align-items:center;gap:8px;font-size:13px;display:inline-flex}.toggle input[type=checkbox]{appearance:none;cursor:pointer;background:#d1d5db;border-radius:10px;width:36px;height:20px;transition:background .2s;position:relative}.toggle input[type=checkbox]:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle input[type=checkbox]:checked{background:var(--primary)}.toggle input[type=checkbox]:checked:after{transform:translate(16px)}.color-preview{border-radius:var(--radius);border:1px solid var(--card-border);width:40px;height:40px;display:inline-block}.mobile-menu-btn{z-index:200;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow);transition:all var(--transition);padding:8px 12px;font-size:18px;display:none;position:fixed;top:12px;left:12px}.mobile-menu-btn:hover{box-shadow:var(--shadow-md);border-color:var(--primary)}@media (width<=768px){.mobile-menu-btn{display:block}}.static-page .page-body{max-width:800px}.static-content{color:var(--text);font-size:14px;line-height:1.8}.static-content h3{color:var(--text);margin-top:24px;margin-bottom:8px;font-size:16px;font-weight:600}.static-content p{margin-bottom:12px}.static-content ul{margin-bottom:12px;padding-left:20px}.static-content li{margin-bottom:8px}.static-date{color:var(--text-muted);font-size:13px;font-style:italic}.contact-email-box{border-radius:var(--radius);background:#f0fdf4;border:1px solid #bbf7d0;margin:16px 0;padding:16px 20px}.contact-email-box h3{margin-top:0}.contact-email-box a{color:var(--primary);font-size:16px;font-weight:600;text-decoration:none}.contact-email-box a:hover{text-decoration:underline}.site-footer{border-top:1px solid var(--card-border);text-align:center;background:linear-gradient(to top, var(--bg), transparent);margin-top:56px;padding:32px 32px 28px}.footer-links{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:14px;display:flex}.footer-links a{color:var(--text-secondary);transition:color var(--transition);border-radius:var(--radius-sm);padding:4px 10px;font-size:13px;text-decoration:none}.footer-links a:hover{color:var(--primary);background:var(--primary-bg)}.footer-links a.active{color:var(--primary);font-weight:500}.footer-copy{color:var(--text-muted);letter-spacing:.01em;font-size:12px}.home-seo-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:44px;padding:36px}.home-seo-section h2{color:var(--text);margin-bottom:16px;font-size:20px;font-weight:700}.home-seo-section h3{color:var(--text);margin-top:20px;margin-bottom:8px;font-size:16px;font-weight:600}.home-seo-section p{color:var(--text-secondary);margin-bottom:12px;font-size:14px;line-height:1.8}.home-seo-section ul{margin-bottom:12px;padding-left:20px}.home-seo-section li{color:var(--text-secondary);margin-bottom:4px;font-size:14px;line-height:1.8}.guides-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:24px;display:grid}.guide-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);color:var(--text);padding:20px;text-decoration:none;transition:all .2s;display:block}.guide-card-meta{color:var(--text-muted);justify-content:space-between;margin-bottom:12px;font-size:13px;display:flex}.guide-card h3{margin-bottom:8px;font-size:16px;line-height:1.4}.guide-card p{color:var(--text-secondary);margin-bottom:12px;font-size:14px;line-height:1.5}.guide-read-more{color:var(--primary);font-size:14px;font-weight:500}.guide-content pre{color:#d4d4d4;border-radius:var(--radius);background:#1e1e1e;margin:16px 0;padding:16px;font-size:13px;line-height:1.5;overflow-x:auto}.guide-content code{font-family:Consolas,Monaco,Courier New,monospace}.guide-content p code{background:var(--hover-bg);color:var(--primary);border-radius:4px;padding:2px 6px;font-size:13px}.guide-content ul,.guide-content ol{margin:12px 0;padding-left:24px}.guide-content li{margin-bottom:8px;line-height:1.6}.guide-cta{border-radius:var(--radius);text-align:center;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #bbf7d0;margin:32px 0;padding:24px}.guide-cta p{margin-bottom:12px;font-size:16px;font-weight:500}.cta-button{background:var(--primary);color:#fff;border-radius:var(--radius);padding:10px 24px;font-weight:500;text-decoration:none;transition:background .2s;display:inline-block}.cta-button:hover{background:var(--primary-light)}.guide-back{border-top:1px solid var(--card-border);margin-top:24px;padding-top:20px}.guide-back a{color:var(--primary);font-weight:500;text-decoration:none}.guide-back a:hover{text-decoration:underline}.tool-description{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:36px;padding:28px}.tool-description h3{color:var(--text);border-bottom:1px solid var(--card-border);margin-top:22px;margin-bottom:8px;padding-bottom:8px;font-size:15px;font-weight:600}.tool-description h3:first-child{margin-top:0}.tool-description p{color:var(--text-secondary);font-size:14px;line-height:1.8}.cookie-consent{z-index:1000;background:var(--card-bg);border-top:1px solid var(--card-border);justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;animation:.3s ease-out slideUp;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 20px #00000014}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.cookie-consent-text{flex:1}.cookie-consent-text strong{color:var(--text);margin-bottom:4px;font-size:14px;font-weight:600;display:block}.cookie-consent-text p{color:var(--text-secondary);margin:0;font-size:13px;line-height:1.5}.cookie-consent-text a{color:var(--primary);font-weight:500;text-decoration:none}.cookie-consent-text a:hover{text-decoration:underline}.cookie-consent-actions{flex-shrink:0;gap:10px;display:flex}.cookie-btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);border:1px solid var(--input-border);padding:8px 20px;font-size:13px;font-weight:500}.cookie-btn-accept{background:var(--primary);color:#fff;border-color:var(--primary)}.cookie-btn-accept:hover{background:var(--primary-light);border-color:var(--primary-light)}.cookie-btn-reject{background:var(--card-bg);color:var(--text-secondary)}.cookie-btn-reject:hover{background:var(--hover-bg);color:var(--text)}@media (width<=640px){.cookie-consent{flex-direction:column;align-items:stretch;padding:16px 20px}.cookie-consent-actions{justify-content:flex-end}}.static-page .page-header h2{font-size:22px}.not-found-suggest{margin-top:20px}.not-found-suggest ul{flex-direction:column;gap:10px;padding:0;list-style:none;display:flex}.not-found-suggest li a{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);color:var(--text);transition:all var(--transition);align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:500;text-decoration:none;display:inline-flex}.not-found-suggest li a:hover{border-color:var(--primary);color:var(--primary);box-shadow:var(--shadow);transform:translate(4px)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d4d7dc;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#b0b5bd}.sidebar::-webkit-scrollbar-thumb{background:#e2e5ea}.sidebar::-webkit-scrollbar-thumb:hover{background:#c8ccd2}.form-input,.form-textarea,.form-select{border:1px solid var(--input-border);border-radius:var(--radius-sm);width:100%;transition:all var(--transition);background:var(--input-bg);color:var(--text);outline:none;padding:10px 12px;font-family:inherit;font-size:14px}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px #18a05b14}.result-box{border:1px solid var(--card-border);border-radius:var(--radius-sm);word-break:break-all;background:#f8fafc;padding:14px;font-family:SF Mono,Fira Code,monospace;font-size:13px;position:relative}.guide-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);color:var(--text);transition:all var(--transition);padding:22px;text-decoration:none;display:block}.guide-card:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-3px)}.static-content h3{color:var(--text);letter-spacing:-.01em;margin-top:28px;margin-bottom:10px;font-size:16px;font-weight:600}@media (width<=768px){.sidebar{box-shadow:none;transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:4px 0 20px #0000001a}.main-content{margin-left:0}.tool-grid{grid-template-columns:1fr}.page-body{padding:18px 16px}.page-header{padding:20px 16px}.home-grid,.home-tools-grid{grid-template-columns:1fr}.home-hero{padding:36px 16px 32px}.home-seo-section{padding:24px 20px}.site-footer{padding:24px 16px}.footer-links{gap:4px}}