*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #4f46e5;--primary-dark: #4338ca;--secondary-color: #10b981;--text-color: #1f2937;--text-light: #6b7280;--bg-color: #ffffff;--bg-secondary: #f9fafb;--border-color: #e5e7eb;--border-radius: 8px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--transition: all .3s ease}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text-color);background-color:var(--bg-color);line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 20px}.header{background-color:var(--bg-color);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.header .container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:relative;overflow:visible}.logo{grid-column:1;justify-self:start}.logo{flex-shrink:0}.nav{display:flex;gap:12px;flex-shrink:0;align-items:center;flex-wrap:nowrap;justify-content:center;position:relative;margin:0 16px;overflow:visible}.logo{font-size:24px;font-weight:700;color:var(--primary-color);text-decoration:none}.logo-text{display:flex;align-items:center}.logo-text:before{content:"🛠️";margin-right:8px}.nav-link{text-decoration:none;color:var(--text-color);font-weight:500;padding:6px 10px;border-radius:var(--border-radius);transition:var(--transition);flex-shrink:0;font-size:14px}.nav-link:hover,.nav-link.active{color:var(--primary-color);background-color:#4f46e50d}.nav-dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;min-width:320px;max-width:480px;background:#fff;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:12px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s ease;z-index:1000}.dropdown-menu:before{content:"";position:absolute;top:-6px;left:20px;width:12px;height:12px;background:#fff;border-left:1px solid var(--border-color);border-top:1px solid var(--border-color);transform:rotate(45deg)}.nav-dropdown:hover>.dropdown-menu,.nav-dropdown:focus-within>.dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu.dropdown-wide{min-width:400px;max-width:600px}.dropdown-section{display:flex;flex-direction:column;padding:0 24px;margin-bottom:8px}.dropdown-section:last-of-type{margin-bottom:0}.dropdown-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);padding:6px 0 4px;margin-bottom:2px;border-bottom:1px solid var(--border-color)}.dropdown-section a{display:block;padding:6px 0;font-size:14px;color:var(--text-color);text-decoration:none;transition:var(--transition);white-space:nowrap}.dropdown-section a:hover{color:var(--primary-color);padding-left:4px}.dropdown-view-all{display:block;padding:10px 24px;margin-top:8px;font-size:13px;font-weight:600;color:var(--primary-color);border-top:1px solid var(--border-color);transition:var(--transition)}.dropdown-view-all:hover{background-color:#4f46e50d;padding-left:16px}.dropdown-wide{min-width:400px;max-width:600px;display:flex;flex-direction:column}.nav-link-highlight{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff}.nav-link-highlight:hover{opacity:.9;background:linear-gradient(135deg,var(--primary-dark),#059669);color:#fff}.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s}.menu-toggle:hover{background:var(--bg-secondary)}.menu-toggle-bar{display:block;width:22px;height:2px;background:var(--text-color);border-radius:2px;transition:all .3s ease}.menu-toggle-bar+.menu-toggle-bar{margin-top:5px}.menu-toggle.open .menu-toggle-bar:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.menu-toggle.open .menu-toggle-bar:nth-child(2){opacity:0}.menu-toggle.open .menu-toggle-bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.nav-chevron{display:none;margin-left:auto;transition:transform .3s ease}@media (max-width: 768px){.menu-toggle{display:flex;z-index:1001}.nav-chevron{display:block}.header .container{position:relative}.nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;width:100%;gap:0;padding:0;margin:0;background:#fff;border-top:1px solid var(--border-color);box-shadow:var(--shadow-lg);max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:1000}.nav.menu-open{max-height:2000px;padding:8px 0;overflow-y:auto}.nav-dropdown{width:100%}.nav-dropdown>.nav-link,.nav>.nav-link{display:flex;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border-color);font-size:15px;color:var(--text-color);text-decoration:none;font-weight:500}.nav>.nav-link:last-child{border-bottom:none}.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;border:none;padding:0;background:var(--bg-secondary);border-radius:0;margin-top:0;min-width:100%}.dropdown-menu:before{display:none}.nav-dropdown.open>.dropdown-menu{display:block}.nav-dropdown.open>.nav-link .nav-chevron{transform:rotate(180deg)}.dropdown-section{padding:0 24px;border-bottom:1px solid var(--border-color)}.dropdown-section:last-of-type{border-bottom:none}.dropdown-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);padding:10px 0 4px;margin-bottom:2px}.dropdown-section a{display:block;padding:10px 0 10px 8px;font-size:14px;color:var(--text-color);border-left:2px solid transparent;white-space:nowrap}.dropdown-section a:hover,.dropdown-section a:active{color:var(--primary-color);border-left-color:var(--primary-color);padding-left:12px}.dropdown-view-all{display:block;padding:12px 24px;margin-top:0;font-size:13px;font-weight:600;color:var(--primary-color);border-top:1px solid var(--border-color)}.dropdown-wide{min-width:100%}}.hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center;padding:100px 20px}.hero-title{font-size:48px;font-weight:700;margin-bottom:16px}.hero-subtitle{font-size:24px;margin-bottom:12px;opacity:.95}.hero-desc{font-size:18px;margin-bottom:32px;opacity:.9}.hero-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:none;border-radius:var(--border-radius);font-size:16px;font-weight:500;cursor:pointer;text-decoration:none;transition:var(--transition);gap:8px}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover{background-color:#0da271;transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-outline{background-color:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover{background-color:var(--primary-color);color:#fff}.btn-lg{padding:16px 32px;font-size:18px}.btn-sm{padding:8px 16px;font-size:14px}.btn-toggle{flex:1;border:2px solid var(--border-color);background-color:var(--bg-color);color:var(--text-color)}.btn-toggle:hover{background-color:var(--bg-secondary)}.btn-toggle.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.section-title{font-size:36px;font-weight:700;text-align:center;margin-bottom:48px;color:var(--text-color)}.page-title{font-size:42px;font-weight:700;margin-bottom:16px;color:var(--text-color)}.page-subtitle{font-size:20px;color:var(--text-light);margin-bottom:32px}.page-header{background-color:var(--bg-secondary);padding:60px 0;text-align:center}.tools-section{padding:80px 0}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}.tool-card{display:block;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:32px;text-align:center;transition:var(--transition);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;cursor:pointer}.tool-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.tool-icon{font-size:48px;margin-bottom:16px}.tool-name{font-size:20px;font-weight:600;margin-bottom:12px;color:var(--text-color)}.tool-desc{color:var(--text-light);margin-bottom:20px;font-size:15px}.tool-link{display:inline-block;color:var(--primary-color);font-weight:500;transition:var(--transition)}.tool-card:hover .tool-link{color:var(--primary-dark);text-decoration:underline}.features-section{background-color:var(--bg-secondary);padding:60px 0}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}.feature-item h3{font-size:20px;margin-bottom:12px;color:var(--primary-color)}.feature-item p{color:var(--text-light);line-height:1.7}.faq-section{padding:80px 0}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.faq-item{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px;box-shadow:var(--shadow-sm)}.faq-question{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--text-color)}.faq-answer{color:var(--text-light);line-height:1.7}.page-faq{background-color:var(--bg-secondary)}.tool-section{padding:60px 0}.tool-container{max-width:1000px;margin:0 auto;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:40px;box-shadow:var(--shadow-md)}.tabs,.result-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:2px solid var(--border-color);padding-bottom:16px}.tab-btn,.result-tab-btn{padding:10px 20px;border:none;background-color:transparent;color:var(--text-light);font-weight:500;cursor:pointer;border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--transition)}.tab-btn:hover,.result-tab-btn:hover{color:var(--primary-color)}.tab-btn.active,.result-tab-btn.active{color:var(--primary-color);background-color:#4f46e51a}.tab-content,.result-tab-content{display:none}.tab-content.active,.result-tab-content.active{display:block}.editor-container{position:relative;margin-bottom:24px;max-width:1400px;margin-left:auto;margin-right:auto}.editor-wrapper{display:flex;gap:16px;height:500px;max-width:100%}.editor-panel{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}.editor-container-with-line-numbers{flex:1;display:flex;flex-direction:row;min-height:0;overflow:hidden;height:100%}.editor{width:100%;min-height:300px;padding:16px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.6;resize:none;transition:var(--transition);flex:1;overflow:auto}.editor:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.editor.readonly{background-color:var(--bg-secondary);cursor:auto;overflow:auto;white-space:pre-wrap;word-break:break-word}.controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}.result-message{padding:16px;border-radius:var(--border-radius);margin-top:24px;display:none}.result-message.success{background-color:#10b9811a;color:#0d9488;border:1px solid #10b981;display:block}.result-message.error{background-color:#ef44441a;color:#b91c1c;border:1px solid #ef4444;display:block}.result-container{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px;margin-top:24px}.result-container.hidden{display:none}.result-section{margin-bottom:24px}.result-section h3{font-size:18px;margin-bottom:12px;color:var(--text-color)}.result-code{background-color:var(--bg-color);padding:16px;border-radius:var(--border-radius);overflow-x:auto;font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}.uuid-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:24px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-weight:500;color:var(--text-color)}.radio-group{display:flex;flex-direction:column;gap:8px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer}.radio-label input[type=radio]{width:18px;height:18px;cursor:pointer}.input-number{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:16px}.uuid-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:24px}.uuid-item{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:16px;display:flex;justify-content:space-between;align-items:center;font-family:Fira Code,Courier New,monospace;font-size:14px}.uuid-item:hover .copy-uuid-btn{opacity:1}.copy-uuid-btn{background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);padding:6px 12px;cursor:pointer;font-size:12px;opacity:0;transition:var(--transition)}.copy-uuid-btn:hover{background-color:var(--primary-dark)}.quantity-control{display:flex;align-items:center;gap:8px}.quantity-control .input-number{width:80px;text-align:center}.quick-qty-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.btn-xs{padding:4px 10px;font-size:12px}.warning-message{margin-top:8px;padding:8px 12px;background-color:#fef3c7;border-left:3px solid #f59e0b;color:#92400e;font-size:13px;border-radius:4px}.format-select{padding:10px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:14px;background-color:var(--bg-color);cursor:pointer}.format-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.info-icon{cursor:help;opacity:.6;font-size:14px}.uuid-stats{display:flex;gap:24px;padding:12px 16px;background-color:var(--bg-secondary);border-radius:var(--border-radius);margin-bottom:16px;font-size:14px;color:var(--text-light)}.uuid-stats span{display:inline-flex;align-items:center;gap:4px}.uuid-structure{padding:16px;background-color:var(--bg-secondary);border-radius:var(--border-radius);margin-bottom:16px}.structure-title{font-weight:600;margin-bottom:8px;font-size:14px}.structure-code{display:block;font-family:Fira Code,monospace;font-size:16px;padding:12px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;margin-bottom:8px}.structure-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--text-light);margin-bottom:8px;padding:0 12px}.structure-note{font-size:12px;color:var(--text-light);margin:0}.empty-state{text-align:center;padding:48px 24px;color:var(--text-light);font-size:14px}.uuid-index{color:var(--text-light);font-size:12px;margin-right:8px;min-width:24px}.copy-uuid-btn svg{vertical-align:middle}.validator-input-group{display:flex;gap:12px;margin-bottom:16px}.validator-input-group .input-text{flex:1}.validate-result{padding:16px;border-radius:var(--border-radius);min-height:60px}.validation-success{padding:16px;background-color:#d1fae5;border-left:4px solid #10b981;border-radius:4px}.validation-success p{margin:4px 0;font-size:14px}.validation-error{padding:16px;background-color:#fee2e2;border-left:4px solid #ef4444;border-radius:4px}.validation-error p{margin:4px 0;font-size:14px}.history-container{margin-top:20px}.history-component{background:transparent;border:none;border-radius:0;box-shadow:none;overflow:visible}.history-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}.history-toolbar-left{display:flex;align-items:baseline;gap:12px}.history-title{margin:0;font-size:16px;font-weight:700;letter-spacing:.5px}.history-count{font-size:13px;opacity:.9;font-weight:500}.history-toolbar-right{display:flex;gap:8px}.btn-clear-all{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:600;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:6px;cursor:pointer;transition:all .2s}.btn-clear-all:hover{background-color:#ffffff4d;border-color:#fff9}.btn-icon{font-size:14px}.history-scroll-container{max-height:400px;overflow-y:auto;overflow-x:hidden}.history-scroll-container::-webkit-scrollbar{width:8px}.history-scroll-container::-webkit-scrollbar-track{background:#f8f9fa}.history-scroll-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.history-scroll-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.history-list{padding:12px;display:flex;flex-direction:column;gap:10px}.history-card{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:12px 14px;cursor:pointer;transition:all .2s;position:relative}.history-card:hover{border-color:#007bff;background:#e9ecef}.history-card.active{border-color:#007bff;background:#e7f3ff}.history-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.history-card-meta{display:flex;align-items:center;gap:8px}.history-badge{display:inline-flex;align-items:center;padding:4px 10px;font-size:12px;font-weight:700;border-radius:20px;letter-spacing:.5px}.version-v4{background:#007bff;color:#fff}.version-v1{background:#6c757d;color:#fff}.history-count-badge{font-size:11px;color:#6c757d;font-weight:600;background:#f8f9fa;padding:3px 8px;border-radius:12px}.btn-delete{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid #dee2e6;border-radius:6px;cursor:pointer;transition:all .2s;padding:0}.delete-icon{font-size:18px;color:#6c757d;font-weight:300;line-height:1}.btn-delete:hover{background:#fee;border-color:#dc3545;transform:scale(1.1)}.btn-delete:hover .delete-icon{color:#dc3545}.history-card-body{margin-bottom:10px}.history-uuid{display:block;font-family:Fira Code,Consolas,monospace;font-size:13px;color:#212529;background:#f8f9fa;padding:8px 12px;border-radius:6px;border:1px solid #e9ecef;word-break:break-all;line-height:1.6;font-weight:500;letter-spacing:.5px}.history-card-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px}.history-time{display:flex;align-items:center;gap:4px;color:#6c757d;font-weight:500}.time-icon{font-size:12px}.history-hint{color:#adb5bd;font-style:italic;font-size:11px}.history-empty{text-align:center;padding:60px 24px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;border:2px dashed #dee2e6}.history-empty-icon{font-size:48px;margin-bottom:16px;opacity:.6}.history-empty-text{font-size:16px;font-weight:600;color:#495057;margin:0 0 8px}.history-empty-hint{font-size:13px;color:#6c757d;margin:0}@media (max-width: 768px){.history-toolbar{padding:12px 16px;flex-direction:column;gap:12px}.history-toolbar-left{width:100%;justify-content:space-between}.history-scroll-container{max-height:300px}.history-card{padding:12px}.history-uuid{font-size:11px;padding:6px 10px}.btn-clear-all span:not(.btn-icon){display:none}.btn-clear-all{padding:8px}}.toast-notification{position:fixed;bottom:24px;right:24px;padding:12px 20px;background-color:var(--text-color);color:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;font-size:14px;z-index:10000;opacity:0;transform:translateY(20px);transition:all .3s ease}.toast-notification.show{opacity:1;transform:translateY(0)}.toast-success{background-color:#10b981}.toast-error{background-color:#ef4444}.toast-icon{font-weight:700;font-size:16px}.preset-charsets{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.charset-info{margin-top:8px;font-size:13px;color:var(--text-light);font-weight:500}.help-text{margin-top:8px;font-size:12px;color:var(--text-light);font-style:italic}.collision-warning{margin-top:12px;padding:10px 14px;background-color:#fef3c7;border-left:3px solid #f59e0b;color:#92400e;font-size:13px;border-radius:4px;display:none}.preview-section{margin-top:12px;padding:12px 16px;background-color:var(--bg-secondary);border-radius:var(--border-radius);display:flex;align-items:center;gap:12px}.preview-label{font-size:13px;color:var(--text-light);font-weight:500}.preview-id{font-family:Fira Code,monospace;font-size:14px;color:var(--primary-color);background-color:var(--bg-color);padding:6px 12px;border-radius:4px;border:1px solid var(--border-color)}.prefix-suffix-group{display:grid;grid-template-columns:1fr 1fr;gap:12px}.realtime-group{margin-top:8px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--text-color)}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer}.comparison-table-wrapper{overflow-x:auto;margin-top:16px}.comparison-table{width:100%;border-collapse:collapse;font-size:14px}.comparison-table thead{background-color:var(--bg-secondary)}.comparison-table th{padding:12px 16px;text-align:left;font-weight:600;color:var(--text-color);border-bottom:2px solid var(--border-color)}.comparison-table td{padding:12px 16px;border-bottom:1px solid var(--border-color);color:var(--text-color)}.comparison-table tbody tr:hover{background-color:var(--bg-secondary)}.dropdown-item{display:block;width:100%;padding:10px 16px;font-size:14px;color:var(--text-color);background:none;border:none;text-align:left;cursor:pointer;transition:var(--transition)}.input-number{padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:14px;text-align:center;transition:var(--transition)}.input-number:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}#custom-chars{font-family:Fira Code,monospace;font-size:13px;resize:vertical}@media (max-width: 768px){.prefix-suffix-group{grid-template-columns:1fr}.quick-qty-buttons,.preset-charsets{justify-content:center}}.input-group{margin-bottom:24px}.input-group label{display:block;font-weight:500;margin-bottom:8px;color:var(--text-color)}.input-text,.input-select{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:16px;transition:var(--transition)}.input-text:focus,.input-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.base64-tabs-content .editor-wrapper{grid-template-columns:1fr}.file-upload-section{margin-top:24px}.file-upload-box{border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:48px 32px;text-align:center;cursor:pointer;transition:var(--transition)}.file-upload-box:hover{border-color:var(--primary-color);background-color:var(--bg-secondary)}.file-upload-label{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:16px}.file-input{display:none}.file-info{margin-bottom:24px}.file-info p{margin-bottom:8px;color:var(--text-light)}.file-info p strong{color:var(--text-color)}.file-actions{display:flex;gap:12px;margin-bottom:24px}.file-result.hidden{display:none}.result-box{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px;margin-bottom:16px;position:relative}.result-box h4{font-size:16px;color:var(--text-light);margin-bottom:12px}.result-value{font-family:Fira Code,Courier New,monospace;font-size:24px;font-weight:600;color:var(--text-color);word-break:break-all}.copy-btn{position:absolute;top:12px;right:12px;padding:6px 12px;font-size:12px}.timestamp-notification{animation:slideIn .2s ease}.category-overview{padding:60px 0;background-color:#f8f9fa}.overview-content{display:flex;gap:40px;align-items:center}@media (max-width: 768px){.overview-content{flex-direction:column}}.overview-text h2{font-size:2rem;margin-bottom:20px;color:#2c3e50}.overview-text h3{font-size:1.5rem;margin:25px 0 15px;color:#34495e}.overview-text ul{padding-left:20px;margin:15px 0}.overview-text li{margin-bottom:10px;line-height:1.6}.overview-image img{max-width:100%;border-radius:8px;box-shadow:0 4px 12px #0000001a}.tools-section{padding:60px 0}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:30px}.tool-card{display:block;padding:24px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;transition:all .3s ease;text-decoration:none}.tool-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000001a;border-color:#3498db}.tool-icon{font-size:2rem;margin-bottom:12px}.tool-name{font-size:1.25rem;margin:10px 0 8px;color:#2c3e50}.tool-desc{color:#7f8c8d;margin:0;line-height:1.5}.documentation-section{padding:60px 0;background-color:#f8f9fa}.docs-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}@media (max-width: 768px){.docs-content{grid-template-columns:1fr}}.docs-article{background:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 10px #0000000d}.docs-article h3{font-size:1.5rem;margin-top:0;color:#2c3e50;border-bottom:2px solid #ecf0f1;padding-bottom:10px}.faq-container{margin-top:30px}.faq-item{border:1px solid #e0e0e0;border-radius:8px;margin-bottom:16px;overflow:hidden}.faq-question{margin:0;padding:16px 20px;background-color:#f8f9fa;cursor:pointer;font-size:1.1rem;font-weight:600;color:#2c3e50;display:flex;justify-content:space-between;align-items:center}.faq-question:after{content:"+";font-size:1.5rem}.faq-item.active .faq-question:after{content:"-"}.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.faq-item.active .faq-answer{padding:20px;max-height:1000px}.faq-answer p{margin:0 0 15px;line-height:1.6}.faq-answer ul{padding-left:20px;margin:15px 0}.faq-answer li{margin-bottom:8px;line-height:1.6}.popular-tools{padding:60px 0;background-color:#f8f9fa}.converter-mode{display:flex;gap:8px;margin-bottom:24px}.current-time-section{margin-top:40px;padding-top:40px;border-top:1px solid var(--border-color)}.current-time-section h3{font-size:20px;margin-bottom:20px;text-align:center}.current-time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.current-time-item{text-align:center;padding:16px;background-color:var(--bg-secondary);border-radius:var(--border-radius)}.current-time-label{display:block;font-weight:500;color:var(--text-color);margin-bottom:8px}.current-time-value{font-family:Fira Code,Courier New,monospace;font-size:18px;color:var(--primary-color);font-weight:600}.sql-highlighted{font-family:Fira Code,Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.6;background-color:#f8fafc;color:#1e293b;padding:16px;white-space:pre-wrap;word-break:break-word;overflow:auto}.sql-keyword{color:#7c3aed;font-weight:600}.sql-function{color:#2563eb;font-weight:500}.sql-string{color:#059669}.sql-number{color:#dc2626}.sql-comment{color:#6b7280;font-style:italic}.sql-operator{color:#ea580c;font-weight:500}@media (prefers-color-scheme: dark){.sql-highlighted{background-color:#1e293b;color:#e2e8f0}.sql-keyword{color:#c084fc}.sql-function{color:#60a5fa}.sql-string{color:#4ade80}.sql-number{color:#f87171}.sql-comment{color:#9ca3af}.sql-operator{color:#fb923c}}.sql-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color)}.option-label{display:flex;align-items:center;gap:8px;cursor:pointer}.option-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.regex-inputs{display:flex;flex-direction:column;gap:24px;margin-bottom:32px}.regex-examples{margin-top:16px;padding:16px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.regex-examples label{display:block;font-size:13px;font-weight:600;color:var(--text-light);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.example-buttons{display:flex;flex-wrap:wrap;gap:8px}.regex-example-btn{padding:6px 12px;font-size:13px;font-weight:500}.regex-example-btn:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.regex-flags{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}.flag-label{display:flex;align-items:center;gap:6px;cursor:pointer}.flag-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.regex-results{margin-top:32px}.highlighted-text{background-color:var(--bg-color);padding:16px;border-radius:var(--border-radius);border:1px solid var(--border-color);margin-bottom:24px;line-height:1.8;font-family:Fira Code,Courier New,monospace;font-size:14px}.highlighted-text .match{background-color:#fef08a;padding:2px 4px;border-radius:4px;font-weight:600;color:#b45309}.match-info{background-color:var(--bg-secondary);padding:16px;border-radius:var(--border-radius);border:1px solid var(--border-color)}.match-info p{margin-bottom:8px}.match-details-item{padding:8px 0;border-bottom:1px solid var(--border-color)}.match-details-item:last-child{border-bottom:none}.match-details-item strong{color:var(--primary-color)}.placeholder{color:var(--text-light);font-style:italic}.hidden{display:none!important}.image-preview-container{margin-top:16px;padding:16px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.image-preview-container h4{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text-color)}#image-preview-wrapper,#file-image-preview-wrapper{display:flex;justify-content:center;align-items:center;padding:16px;background:repeating-conic-gradient(#f0f0f0,#f0f0f0 25%,#fff 0%,#fff 50%) 50% / 20px 20px;border-radius:var(--border-radius);border:1px solid var(--border-color);max-height:500px;overflow:auto}.image-preview{max-width:100%;max-height:480px;object-fit:contain;border-radius:4px}.footer{background-color:var(--bg-secondary);padding:40px 0;margin-top:80px;text-align:center}.footer p{color:var(--text-light);margin-bottom:8px}.footer-content{max-width:800px;margin:0 auto}.footer-links{display:flex;justify-content:center;gap:24px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border-color)}.footer-links a{color:var(--text-light);text-decoration:none;font-size:14px;transition:var(--transition)}.footer-links a:hover{color:var(--primary-color)}.content-section{padding:40px 0}.content-wrapper{max-width:800px;margin:0 auto}.content-wrapper h2{font-size:24px;color:var(--text-color);margin-top:40px;margin-bottom:16px}.content-wrapper h3{font-size:18px;color:var(--primary-color);margin-top:24px;margin-bottom:12px}.content-wrapper p{color:var(--text-light);line-height:1.7;margin-bottom:16px}.content-wrapper ul{margin-bottom:16px;padding-left:24px}.content-wrapper li{color:var(--text-light);line-height:1.7;margin-bottom:8px}.content-wrapper a{color:var(--primary-color);text-decoration:none}.content-wrapper a:hover{text-decoration:underline}.disclaimer-section{padding:40px 0 60px;background-color:var(--bg-secondary)}.disclaimer-section h2{text-align:center;font-size:28px;margin-bottom:32px;color:var(--text-color)}.disclaimer-box{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm)}.disclaimer-box h3{font-size:18px;color:var(--text-color);margin-bottom:12px}.disclaimer-box p{color:var(--text-light);line-height:1.7;margin-bottom:0}@media (max-width: 768px){.nav{justify-content:center}.hero-title{font-size:36px}.hero-subtitle{font-size:20px}.hero-buttons{flex-direction:column;align-items:center}.editor-wrapper{grid-template-columns:1fr}.tool-container{padding:24px}.page-title{font-size:32px}.footer-links{flex-direction:column;gap:12px}.content-wrapper h2{font-size:20px}.disclaimer-box{padding:16px}.controls{flex-direction:column}}.tree-view{font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.6;color:var(--text-color)}.tree-view pre{margin:0;white-space:pre-wrap;word-break:break-word}.json-string{color:#10b981}.json-boolean{color:#3b82f6}.json-null{color:#9ca3af}.json-key{color:#8b5cf6}#json-output{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}#json-output.readonly{background-color:#f8fafc;border:1px solid var(--border-color);padding:16px;border-radius:var(--border-radius);min-height:300px;font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.6;overflow:auto}#json-output pre{margin:0;white-space:pre-wrap;word-break:break-word}.tab-btn{position:relative;transition:all .2s ease}.tab-btn:hover{background-color:#4f46e50d}.tab-btn.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background-color:var(--primary-color)}.json-tree-container{font-family:Fira Code,Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:18px;color:var(--text-color);background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);will-change:transform}.json-tree-content{position:relative}.tree-viewport{contain:layout style paint}.tree-notice{background-color:#f59e0b1a;border-bottom:1px solid rgba(245,158,11,.3);padding:8px 12px;font-size:12px;color:#92400e;position:sticky;top:0;z-index:10}.tree-node{margin:0;padding:0;display:block}.tree-line{padding:0;margin:0;display:flex;align-items:center;flex-wrap:nowrap;height:18px;line-height:18px;white-space:nowrap;overflow:hidden;contain:layout style paint}.tree-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:0;margin:0;height:18px;line-height:18px}.tree-header:hover{background-color:#4f46e50d}.tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:18px;cursor:pointer;margin-right:2px;flex-shrink:0}.tree-icon{font-size:10px;color:var(--primary-color);line-height:1}.tree-key{color:#8b5cf6;font-weight:500}.tree-bracket{color:var(--text-color);font-weight:600}.tree-count{color:var(--text-light);font-size:11px;margin-left:4px;font-style:italic}.tree-ellipsis{color:var(--text-light);margin:0 2px}.tree-comma{color:var(--text-color);margin-left:1px}.tree-value{display:inline}.tree-value.string{color:#10b981}.tree-value.number{color:#f59e0b}.tree-value.boolean{color:#3b82f6}.tree-value.null{color:#9ca3af}.tree-leaf{padding:0;margin:0;height:18px;line-height:18px}.tree-error{color:#ef4444;padding:8px;text-align:center;font-weight:500}.tree-controls-wrapper.hidden{display:none}.json-highlighted{font-family:Fira Code,Consolas,Monaco,Courier New,monospace;font-size:13px;line-height:1.4;margin:0;padding:0;white-space:pre-wrap;word-break:break-word}.json-key{color:#d946ef;font-weight:600}.json-string{color:#22c55e}.json-number{color:#f59e0b}.json-boolean{color:#3b82f6;font-weight:600}.json-null{color:#9ca3af;font-style:italic}.json-bracket{color:#6b7280;font-weight:600}.json-comma{color:#6b7280}@media (prefers-color-scheme: dark){.json-key{color:#f0abfc}.json-string{color:#86efac}.json-number{color:#fcd34d}.json-boolean{color:#93c5fd}.json-null,.json-bracket,.json-comma{color:#9ca3af}}.path-input-section{margin-bottom:24px;padding:20px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.path-label{display:block;font-weight:600;margin-bottom:12px;color:var(--text-color);font-size:16px}.path-input-wrapper{display:flex;gap:12px;margin-bottom:12px}.path-input{flex:1;padding:12px 16px;border:2px solid var(--border-color);border-radius:var(--border-radius);font-family:Fira Code,Courier New,monospace;font-size:16px;color:var(--text-color);background-color:var(--bg-color);transition:var(--transition)}.path-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.btn-query{padding:12px 24px;white-space:nowrap}.path-examples{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px}.examples-label{color:var(--text-light);font-weight:500;margin-right:4px}.example-link{display:inline-block;padding:4px 10px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;color:var(--primary-color);text-decoration:none;font-family:Fira Code,Courier New,monospace;font-size:13px;transition:var(--transition)}.example-link:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.jsonpath-container{display:flex;gap:20px}.jsonpath-container .editor-wrapper{flex:1;display:flex;flex-direction:column}.jsonpath-container .editor-wrapper .editor{min-height:400px;flex:1}.editor-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:500;color:var(--text-color);font-size:14px}.btn-link{background:none;border:none;color:var(--primary-color);font-size:13px;cursor:pointer;text-decoration:underline;padding:0}.btn-link:hover{color:var(--primary-dark)}.syntax-section{padding:60px 0;background-color:var(--bg-secondary)}.syntax-section h2{text-align:center;font-size:32px;margin-bottom:40px;color:var(--text-color)}.syntax-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.syntax-card{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px;box-shadow:var(--shadow-sm)}.syntax-card h3{font-size:18px;margin-bottom:16px;color:var(--primary-color);padding-bottom:8px;border-bottom:2px solid var(--border-color)}.syntax-table{width:100%;border-collapse:collapse}.syntax-table td{padding:10px 0;border-bottom:1px solid var(--border-color);font-size:14px}.syntax-table td:first-child{width:45%;font-family:Fira Code,Courier New,monospace}.syntax-table td:last-child{color:var(--text-light)}.syntax-table tr:last-child td{border-bottom:none}.syntax-table code{background-color:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:13px;color:var(--primary-color)}.json-error{color:#ef4444;padding:16px;background-color:#ef44440d;border-radius:var(--border-radius);font-family:Fira Code,Courier New,monospace;font-size:14px}.features-highlight{padding:60px 0}.features-highlight h2{text-align:center;font-size:32px;margin-bottom:40px;color:var(--text-color);white-space:nowrap}.features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}.feature{text-align:center;padding:24px}.feature h3{font-size:20px;margin-bottom:12px;color:var(--text-color)}.feature p{color:var(--text-light);line-height:1.7}.how-to-use{padding:60px 0;background-color:var(--bg-secondary)}.how-to-use h2{text-align:center;font-size:32px;margin-bottom:40px;color:var(--text-color)}.steps{display:flex;flex-direction:column;gap:24px;max-width:700px;margin:0 auto}.step{display:flex;align-items:flex-start;gap:20px;padding:20px 24px;background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.step-number{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--primary-color);color:#fff;font-size:18px;font-weight:700;border-radius:50%}.step-content h3{font-size:18px;font-weight:600;margin-bottom:6px;color:var(--text-color)}.step-content p{color:var(--text-light);line-height:1.6}.faq-section{padding:60px 0}.faq-section h2{text-align:center;font-size:32px;margin-bottom:40px;color:var(--text-color)}.html-highlighted{font-family:Fira Code,Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.6;margin:0;padding:0;white-space:pre-wrap;word-break:break-word}.html-tag{color:#059669}.html-bracket{color:#6b7280}.html-attribute{color:#8b5cf6}.html-attribute-value{color:#2563eb}.html-comment{color:#9ca3af;font-style:italic}@media (prefers-color-scheme: dark){.html-tag{color:#4ade80}.html-bracket{color:#9ca3af}.html-attribute{color:#c084fc}.html-attribute-value{color:#93c5fd}.html-comment{color:#6b7280}}.css-highlighted{font-family:Fira Code,Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.6;margin:0;padding:0;white-space:pre-wrap;word-break:break-word}.css-selector{color:#8b5cf6}.css-property{color:#2563eb}.css-value{color:#059669}.css-string{color:#d97706}.css-comment{color:#9ca3af;font-style:italic}.css-atrule{color:#dc2626}.css-tag{color:#6b7280}.css-number{color:#2563eb}.css-unit{color:#6b7280;font-style:italic}@media (prefers-color-scheme: dark){.css-selector{color:#c084fc}.css-property{color:#93c5fd}.css-value{color:#4ade80}.css-string{color:#fbbf24}.css-comment{color:#6b7280}.css-atrule{color:#f87171}.css-tag{color:#9ca3af}.css-number{color:#93c5fd}.css-unit{color:#9ca3af}}.js-highlighted{font-family:Fira Code,Consolas,Monaco,Courier New,monospace!important;font-size:14px;line-height:1.6;margin:0;padding:16px;white-space:pre-wrap;word-break:break-word;background-color:var(--bg-secondary);border-radius:var(--border-radius);overflow:auto}#javascript-output{min-height:200px;overflow:auto}#javascript-output pre{margin:0;padding:0}#javascript-output .js-keyword,pre.js-highlighted .js-keyword{color:#dc2626!important}#javascript-output .js-string,pre.js-highlighted .js-string{color:#059669!important}#javascript-output .js-comment,pre.js-highlighted .js-comment{color:#9ca3af!important;font-style:italic}#javascript-output .js-number,pre.js-highlighted .js-number{color:#2563eb!important}#javascript-output .js-function,pre.js-highlighted .js-function{color:#8b5cf6!important}#javascript-output .js-constant,pre.js-highlighted .js-constant{color:#d97706!important}#javascript-output .js-operator,pre.js-highlighted .js-operator{color:#6b7280!important}@media (prefers-color-scheme: dark){#javascript-output .js-keyword,pre.js-highlighted .js-keyword{color:#f87171!important}#javascript-output .js-string,pre.js-highlighted .js-string{color:#4ade80!important}#javascript-output .js-comment,pre.js-highlighted .js-comment{color:#6b7280!important}#javascript-output .js-number,pre.js-highlighted .js-number{color:#93c5fd!important}#javascript-output .js-function,pre.js-highlighted .js-function{color:#c084fc!important}#javascript-output .js-constant,pre.js-highlighted .js-constant{color:#fbbf24!important}#javascript-output .js-operator,pre.js-highlighted .js-operator{color:#9ca3af!important}}@media (max-width: 768px){.path-input-wrapper{flex-direction:column}.btn-query{width:100%}.path-examples{font-size:12px}.example-link{padding:3px 8px;font-size:11px}.jsonpath-container .editor-wrapper,.syntax-grid{grid-template-columns:1fr}}.validation-success{padding:8px 12px;background-color:#10b9810d;border:1px solid rgba(16,185,129,.3);border-radius:var(--border-radius)}.validation-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid rgba(16,185,129,.2)}.validation-icon{font-size:16px;line-height:1}.validation-title{font-size:14px;font-weight:600;color:#059669;line-height:1.2}.validation-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:4px;margin-bottom:6px}.validation-stat{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;background-color:#fff;border-radius:3px;border:1px solid rgba(16,185,129,.2)}.stat-label{color:var(--text-light);font-size:11px}.stat-value{font-weight:600;color:#059669;font-family:Fira Code,monospace;font-size:11px}.validation-preview{margin-top:6px}.preview-label{font-weight:600;color:var(--text-color);margin-bottom:3px;font-size:12px;line-height:1.2}.validation-preview pre{max-height:250px;overflow:auto;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:3px;padding:4px 6px;margin:0;line-height:1.3}.validation-error{padding:12px 16px;background-color:#ef44440d;border:1px solid rgba(239,68,68,.3);border-radius:var(--border-radius)}.error-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(239,68,68,.2)}.error-icon{font-size:20px}.error-title{font-size:16px;font-weight:600;color:#dc2626}.error-message{background-color:#fff;padding:8px 12px;border-radius:4px;border-left:3px solid #dc2626;margin-bottom:8px;color:#dc2626;font-family:Fira Code,monospace;font-size:12px}.error-location{background-color:#ef44441a;padding:6px 10px;border-radius:4px;margin-bottom:10px;font-size:12px;color:#7f1d1d}.error-context{margin-bottom:10px}.context-label{font-weight:600;color:var(--text-color);margin-bottom:4px;font-size:13px}.error-code{background-color:#1f2937;color:#e5e7eb;padding:0;border-radius:4px;overflow:auto;font-family:Fira Code,Consolas,monospace;font-size:12px;line-height:1.5}.error-code .context-line{display:flex;padding:1px 0}.error-code .error-line{display:flex;flex-direction:column;padding:1px 0;background-color:#ef44444d}.line-number{color:#6b7280;padding:0 6px 0 0;min-width:28px;text-align:right;-webkit-user-select:none;user-select:none;font-size:11px}.line-content{flex:1;padding-right:8px;white-space:pre}.column-marker{display:flex;background-color:#ef444433;line-height:1}.column-marker .line-number{min-width:28px}.marker-content{flex:1;color:#ef4444;font-weight:700;padding-right:12px}.error-hints{background-color:#f59e0b1a;border:1px solid rgba(245,158,11,.3);border-radius:4px;padding:10px 14px}.hints-title{font-weight:600;color:#b45309;margin-bottom:6px;font-size:13px}.error-hints ul{margin:0;padding-left:16px;color:#92400e;font-size:12px}.error-hints li{margin-bottom:2px}.error-hints li:last-child{margin-bottom:0}.tab-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding:10px 12px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.tab-controls .btn{padding:6px 14px;font-size:13px;font-weight:500}#main-controls{display:none!important}.jwt-section{margin-bottom:16px;border:1px solid;border-radius:var(--border-radius);overflow:hidden}.jwt-header-section{border-color:#f871714d;background-color:#f8717105}.jwt-payload-section{border-color:#4ade804d;background-color:#4ade8005}.jwt-signature-section{border-color:#9ca3af4d;background-color:#9ca3af05}.jwt-section-label{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-color);background-color:#fffc;border-bottom:1px solid var(--border-color)}.jwt-section-label .jwt-header-label{color:#f87171}.jwt-section-label .jwt-payload-label{color:#22c55e}.jwt-section-label .jwt-signature-label{color:#6b7280}.jwt-claim-count{font-weight:500;text-transform:none;letter-spacing:0;font-size:12px;color:var(--text-light)}.jwt-section-body{padding:12px 14px;margin:0;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:200px;overflow-y:auto}.jwt-header-body{color:#dc2626}.jwt-payload-body{color:var(--text-color)}.jwt-signature-body{color:var(--text-light);word-break:break-all;font-size:12px;max-height:60px}.jwt-token-status{margin-top:16px;padding:14px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.jwt-status-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px}.jwt-status-item:not(:last-child){border-bottom:1px solid var(--border-color);padding-bottom:6px;margin-bottom:6px}.jwt-status-valid{color:#059669}.jwt-status-expired{color:#dc2626}.jwt-status-warning{color:#b45309}.jwt-status-info{color:var(--text-color)}#encode-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}#encode-controls .example-label{font-size:13px;font-weight:600;color:var(--text-light);margin-left:4px}.algo-select-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-color)}.algo-select{padding:6px 32px 6px 10px;border:1px solid var(--border-color);border-radius:6px;font-family:Fira Code,monospace;font-size:13px;background-color:var(--bg-secondary);color:var(--text-color);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.762L10.825 4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px;min-width:100px;transition:all .2s ease}.algo-select:hover{border-color:var(--primary-color);background-color:var(--bg-primary)}.algo-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}.secret-key-input{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-family:Fira Code,monospace;font-size:13px;background-color:var(--bg-secondary);color:var(--text-color);min-width:160px}.secret-key-input:focus{outline:none;border-color:var(--primary-color)}.secret-key-input:disabled{opacity:.5;cursor:not-allowed}#encode-controls .claim-checkbox{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--text-color);cursor:pointer}#encode-controls .claim-checkbox input{width:14px;height:14px;cursor:pointer}#generated-jwt-output{background-color:var(--bg-secondary);color:var(--text-color);font-family:Fira Code,Consolas,Monaco,monospace;font-size:12px;line-height:1.6;word-break:break-all;white-space:pre-wrap;overflow-y:auto;max-height:150px}#encoder-section.hidden,#decoder-section.hidden{display:none}.format-select{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-size:13px;background-color:var(--bg-secondary);color:var(--text-color);cursor:pointer;min-width:140px}.format-select:focus{outline:none;border-color:var(--primary-color)}.jwt-tool-section{padding:40px 0 20px}.jwt-diagram{display:flex;align-items:center;justify-content:center;gap:4px;padding:16px;background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:var(--border-radius);font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;overflow-x:auto}.jwt-part{padding:8px 14px;border-radius:6px;cursor:pointer;transition:all .2s ease;font-weight:600;white-space:nowrap}.jwt-part:hover{transform:translateY(-2px);filter:brightness(1.15)}.jwt-header-part{background-color:#f87171;color:#7f1d1d}.jwt-payload-part{background-color:#4ade80;color:#14532d}.jwt-signature-part{background-color:#9ca3af;color:#374151}.jwt-separator{color:#64748b;font-weight:700;font-size:18px;-webkit-user-select:none;user-select:none}.result-message{display:none;text-align:center;padding:12px;margin-top:16px;border-radius:var(--border-radius);font-size:14px}.result-message.success{background-color:#10b9811a;color:#059669;border:1px solid rgba(16,185,129,.2)}.result-message.error{background-color:#ef44441a;color:#dc2626;border:1px solid rgba(239,68,68,.2)}.jwt-features-section{padding:60px 0;background-color:var(--bg-secondary);margin-top:40px}.jwt-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.jwt-feature-card{background:#fff;border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px 20px;text-align:center;box-shadow:var(--shadow-sm);transition:var(--transition)}.jwt-feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.jwt-feature-icon{font-size:32px;margin-bottom:12px}.jwt-feature-card h3{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text-color)}.jwt-feature-card p{font-size:14px;color:var(--text-light);line-height:1.5;margin:0}.jwt-faq-section{padding:60px 0}.faq-category h3{font-size:18px;font-weight:700;margin-bottom:20px;color:var(--text-color);padding-left:4px}.faq-category+.faq-category{margin-top:40px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.faq-item{background:#fff;border:1px solid var(--border-color);border-radius:var(--border-radius);padding:20px;box-shadow:var(--shadow-sm)}.faq-question{width:100%;text-align:left;font-size:15px;font-weight:600;color:var(--text-color);background:none;border:none;cursor:pointer;padding:0;margin-bottom:0;line-height:1.4;display:flex;justify-content:space-between;align-items:center}.faq-question:after{content:"+";font-size:18px;font-weight:400;color:var(--text-light);flex-shrink:0;margin-left:12px;transition:transform .2s ease}.faq-question[aria-expanded=true]:after{content:"−";color:var(--primary-color)}.faq-answer{font-size:14px;color:var(--text-light);line-height:1.6;margin-top:12px;display:none}.faq-item.active .faq-answer,.faq-answer.open{display:block}.faq-answer code{background-color:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:13px}.faq-example{margin-top:12px;max-height:0;overflow:hidden;padding:0 16px;transition:max-height .3s ease,padding .3s ease}.faq-item.active .faq-example{display:block!important;max-height:1000px;padding:16px}.faq-item.active .faq-example.hidden{display:block!important;max-height:1000px!important;padding:16px!important}.faq-example p{font-size:14px;color:var(--text-light);margin-bottom:8px}.faq-example pre{background-color:var(--bg-secondary);padding:10px 12px;border-radius:6px;font-family:Fira Code,monospace;font-size:12px;overflow-x:auto;margin-bottom:12px}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@media (max-width: 968px){.jwt-diagram{font-size:11px;padding:10px 12px}.jwt-part{padding:4px 8px;font-size:11px}}@media (max-width: 640px){.jwt-tool-section{padding:24px 0 16px}.algo-list{grid-template-columns:1fr}.card-actions-primary .btn{flex:none}}.pwd-tool-container{max-width:720px}.pwd-tool-container .tabs{margin-bottom:24px}.pwd-display-area{margin-bottom:20px}.pwd-output-wrapper{display:flex;align-items:stretch;gap:0;background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:var(--border-radius);overflow:hidden;border:1px solid var(--border-color);min-height:72px}.pwd-display{flex:1;padding:20px 24px;font-family:Fira Code,Consolas,Monaco,monospace;font-size:20px;line-height:1.5;color:#e2e8f0;cursor:pointer;word-break:break-all;-webkit-user-select:all;user-select:all;transition:background-color .2s;background:transparent;border:none;display:flex;align-items:center}.pwd-display:hover{background-color:#ffffff08}.pwd-display.pwd-error{color:#f87171;font-size:16px;cursor:default}.btn-copy-lg{display:flex;align-items:center;justify-content:center;padding:0 20px;background:#ffffff0d;border:none;border-left:1px solid var(--border-color);cursor:pointer;color:#94a3b8;transition:all .2s}.btn-copy-lg:hover{background:#ffffff1a;color:#fff}.pwd-strength-bar{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 14px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.strength-track{flex:1;height:6px;background-color:var(--border-color);border-radius:3px;overflow:hidden}.strength-fill{height:100%;width:0%;border-radius:3px;transition:width .3s ease,background-color .3s ease}.strength-label{font-size:13px;font-weight:600;white-space:nowrap;min-width:80px;text-align:right}.pwd-bulk-area{margin-bottom:20px}.pwd-bulk-output{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:16px;min-height:100px;max-height:400px;overflow-y:auto}.pwd-bulk-placeholder{color:var(--text-light);font-size:14px;text-align:center;padding:24px}.pwd-list{margin:0;padding:0;list-style:none;counter-reset:pwd-counter}.pwd-list-item{counter-increment:pwd-counter;padding:8px 12px;font-family:Fira Code,Consolas,Monaco,monospace;font-size:14px;color:var(--text-color);border-bottom:1px solid var(--border-color);line-height:1.6;word-break:break-all}.pwd-list-item:last-child{border-bottom:none}.pwd-list-item:before{content:counter(pwd-counter);display:inline-block;width:24px;color:var(--text-light);font-weight:600;font-size:12px}.pwd-list-item code{background:none;padding:0;font-family:inherit;font-size:inherit}.pwd-options{display:flex;flex-direction:column;gap:20px;padding:20px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color)}.pwd-option-group{display:flex;flex-direction:column;gap:10px}.option-header{display:flex;justify-content:space-between;align-items:center}.option-label{font-size:13px;font-weight:600;color:var(--text-color);text-transform:uppercase;letter-spacing:.5px}.length-badge{font-family:Fira Code,monospace;font-size:14px;font-weight:700;padding:2px 10px;background-color:var(--primary-color);color:#fff;border-radius:12px;min-width:32px;text-align:center}.pwd-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--border-color);border-radius:3px;outline:none;cursor:pointer}.pwd-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:3px solid white;box-shadow:0 2px 6px #0003}.pwd-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary-color);cursor:pointer;border:3px solid white;box-shadow:0 2px 6px #0003}.slider-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--text-light)}.char-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease}.toggle:hover{border-color:var(--primary-color)}.toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary-color);cursor:pointer;flex-shrink:0}.toggle-label{font-family:Fira Code,monospace;font-size:13px;font-weight:700;color:var(--text-color);min-width:32px}.toggle-desc{font-size:12px;color:var(--text-light);margin-left:auto}.pwd-generate-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;font-size:16px;font-weight:600;border-radius:var(--border-radius);width:100%}.btn-row{display:flex;gap:8px;margin-top:12px}.btn-row .btn{flex:1}@media (max-width: 640px){.pwd-display{font-size:16px;padding:16px}.char-toggles{grid-template-columns:1fr}.pwd-output-wrapper{min-height:60px}.btn-copy-lg{padding:0 14px}}.length-control-wrapper{display:flex;align-items:center;gap:8px}.length-number-input{width:70px;padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;text-align:center;background:var(--bg-primary);color:var(--text-color)}.length-number-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.preset-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.preset-btn{white-space:nowrap}.toggle-inline{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer}.toggle-inline input[type=checkbox]{margin:0}.toggle-inline .toggle-label{font-family:inherit;font-size:14px;font-weight:500;color:var(--text-color)}.entropy-label{font-size:12px;color:var(--text-light);margin-left:auto;font-weight:500}.info-icon{font-size:14px;cursor:help;margin-left:8px;opacity:.6;transition:opacity .2s}.info-icon:hover{opacity:1}.btn-copy-sm{background:transparent;border:1px solid var(--border-color);color:var(--text-light);padding:4px 8px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-left:8px}.btn-copy-sm:hover{background:var(--bg-secondary);color:var(--primary-color);border-color:var(--primary-color)}.dropdown-wrapper{position:relative}.dropdown-menu{position:absolute;top:100%;right:0;min-width:180px;background:#fff;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;z-index:1000;margin-top:8px}.dropdown-menu.show{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:block;width:100%;padding:8px 16px;text-align:left;background:none;border:none;font-size:14px;color:var(--text-color);cursor:pointer;transition:background-color .2s}.dropdown-item:hover{background-color:var(--bg-secondary);color:var(--primary-color)}.security-guide{margin-top:16px;padding:20px;background:var(--bg-secondary);border-radius:var(--border-radius);border-left:4px solid var(--primary-color)}.security-tips{list-style:none;padding:0;margin:0}.security-tips li{padding:8px 0 8px 24px;position:relative;font-size:14px;line-height:1.6;color:var(--text-color)}.security-tips li:before{content:"✓";position:absolute;left:0;color:var(--secondary-color);font-weight:700}.security-tips li strong{color:var(--primary-color)}.hash-tool-container{max-width:800px}.hash-input-section,.hash-output-section{margin-bottom:24px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-header label,.section-header h3{font-size:16px;font-weight:600;color:var(--text-color);margin:0}.hash-input{width:100%;min-height:120px;padding:16px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.6;resize:vertical;background:var(--bg-primary);color:var(--text-color);box-sizing:border-box}.hash-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.hash-results{display:grid;gap:16px}.hash-card{background:#0f172a;border-radius:var(--border-radius);border:1px solid #1e293b;overflow:hidden}.hash-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#1e293b;border-bottom:1px solid #334155}.hash-badge{font-size:13px;font-weight:600;color:#e2e8f0;background:#334155;padding:3px 10px;border-radius:6px}.btn-copy-hash{background:transparent;border:1px solid #475569;color:#94a3b8;padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-copy-hash:hover{background:#334155;color:#e2e8f0;border-color:#64748b}.hash-value{display:block;padding:14px 16px;font-family:Fira Code,Courier New,monospace;font-size:14px;line-height:1.7;color:#38bdf8;word-break:break-all;background:#0f172a;margin:0}.hash-error{color:#f87171}.hash-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.hash-generate-btn{flex:1;min-width:200px}@media (max-width: 768px){.hash-actions{flex-direction:column}.hash-actions .btn{width:100%;text-align:center}.hash-generate-btn{min-width:auto}}.lorem-tool-container{max-width:800px}.lorem-options{margin-bottom:16px}.lorem-option-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.lorem-count-inline{display:flex;align-items:center;gap:8px}.lorem-count-inline label{font-size:14px;font-weight:500;color:var(--text-color)}.lorem-count-inline input{width:70px;padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;text-align:center;background:var(--bg-primary);color:var(--text-color)}.lorem-count-inline input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.lorem-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.lorem-generate-btn{flex:1;min-width:180px}.lorem-output{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:20px;min-height:200px;max-height:500px;overflow-y:auto;font-family:Georgia,Times New Roman,serif;font-size:15px;line-height:1.8;color:var(--text-color)}.lorem-output p{margin:0 0 1em}.lorem-output p:last-child{margin-bottom:0}.lorem-placeholder{color:var(--text-light);font-style:italic;text-align:center;padding:40px 0;margin:0}@media (max-width: 768px){.lorem-option-row{flex-direction:column;align-items:flex-start}.lorem-actions{flex-direction:column}.lorem-actions .btn{width:100%;text-align:center}.lorem-generate-btn{min-width:auto}}.rng-tool-container{max-width:800px}.rng-tool-container .tabs{margin-bottom:24px}.rng-group{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:20px;margin-bottom:24px}.rng-group-title{font-size:16px;font-weight:600;color:var(--text-color);margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--primary-color)}.rng-range-inputs{display:flex;gap:16px;align-items:flex-end}.rng-range-separator{font-size:20px;color:var(--text-light);font-weight:500;padding-bottom:10px;-webkit-user-select:none;user-select:none}.rng-option{display:flex;flex-direction:column;gap:8px;flex:1}.rng-option label{font-size:13px;font-weight:600;color:var(--text-color);text-transform:uppercase;letter-spacing:.5px}.rng-option input[type=number]{padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;font-size:15px;font-family:Fira Code,Courier New,monospace;background:var(--bg-primary);color:var(--text-color);text-align:center;width:100%;box-sizing:border-box;transition:all .2s}.rng-option input[type=number]:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.rng-count-full{flex:1}.rng-count-input-wrapper{display:flex;gap:8px;align-items:center}.count-adjust-btn{min-width:44px;height:44px;padding:0;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center}.rng-count-input-wrapper input[type=number]{flex:1;min-height:44px}.rng-quick-presets{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.presets-label{font-size:13px;color:var(--text-light);font-weight:500}.preset-count-btn{min-width:44px;min-height:36px;padding:6px 12px}.rng-format-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.rng-type-toggles{display:flex;gap:16px}.rng-type-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}.rng-type-toggle input[type=radio]{accent-color:var(--primary-color);width:16px;height:16px;cursor:pointer}.radio-label{font-size:14px;font-weight:500;color:var(--text-color);text-transform:none;letter-spacing:normal;cursor:pointer}.rng-select{width:100%;padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;font-size:14px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;transition:all .2s}.rng-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.rng-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.rng-generate-btn{flex:2;min-width:140px;min-height:44px}.rng-actions .btn{flex:1;min-width:100px;min-height:44px}.rng-output{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:12px;padding:20px;min-height:100px;max-height:400px;overflow-y:auto}.rng-single-number{font-family:Fira Code,Courier New,monospace;font-size:28px;font-weight:700;color:var(--primary-color);text-align:center;padding:20px 0;word-break:break-all}.rng-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.rng-list-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:all .2s}.rng-list-item:hover{border-color:var(--primary-color);box-shadow:0 2px 8px #6366f11a}.rng-list-item code{font-family:Fira Code,Courier New,monospace;font-size:15px;color:var(--text-color);flex:1;text-align:left;word-break:break-all}.btn-copy-single{background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:6px 10px;cursor:pointer;transition:all .2s;flex-shrink:0;min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center}.btn-copy-single:hover{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.toggle-label{font-size:14px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-inline{padding:8px 0}.rng-placeholder{color:var(--text-light);font-style:italic;text-align:center;padding:20px 0;margin:0}@media (max-width: 768px){.rng-group{padding:16px;margin-bottom:20px}.rng-group-title{font-size:15px;margin-bottom:12px}.rng-range-inputs{flex-direction:column;gap:12px}.rng-range-separator{display:none}.rng-format-options{grid-template-columns:1fr;gap:12px}.rng-type-toggles,.rng-actions{flex-direction:column;gap:8px}.rng-actions .btn,.rng-generate-btn{width:100%;min-width:auto;text-align:center}.rng-single-number{font-size:22px}.rng-list-item code{font-size:14px}.preset-count-btn{min-width:40px;padding:6px 10px;font-size:13px}}.date-tool-container{max-width:720px}.date-tool-container .tabs{margin-bottom:20px}.date-range-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.date-mode-panel .date-range-inputs:only-child,.date-field-full{grid-template-columns:1fr}.date-field{display:flex;flex-direction:column;gap:6px}.date-field label{font-size:13px;font-weight:600;color:var(--text-color);text-transform:uppercase;letter-spacing:.5px}.date-input-row{display:flex;gap:8px}.date-input-row input[type=date]{flex:1}.date-field input[type=date],.date-field input[type=number],.date-input-row input[type=date]{padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;font-size:15px;font-family:Fira Code,Courier New,monospace;background:var(--bg-primary);color:var(--text-color);box-sizing:border-box}.date-field input:focus,.date-input-row input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.btn-today{padding:8px 14px;font-size:13px;font-weight:600;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--primary-color);cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit}.btn-today:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.date-check-row{margin-bottom:14px}.checkbox-label{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-color);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary-color)}.date-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:10px 14px;border-radius:8px;font-size:14px;margin-bottom:14px}.arith-controls{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}.arith-direction{display:flex;border-radius:8px;overflow:hidden;border:1px solid var(--border-color)}.btn-dir{padding:10px 18px;font-size:14px;font-weight:600;border:none;background:var(--bg-primary);color:var(--text-color);cursor:pointer;transition:all .15s;font-family:inherit}.btn-dir+.btn-dir{border-left:1px solid var(--border-color)}.btn-dir.active{background:var(--primary-color);color:#fff}.btn-dir:first-child.active{background:#059669}.btn-dir:last-child.active{background:#dc2626}.arith-amount{width:80px;padding:10px 8px;border:1px solid var(--border-color);border-radius:8px;font-size:15px;font-family:Fira Code,Courier New,monospace;text-align:center;background:var(--bg-primary);color:var(--text-color);box-sizing:border-box}.arith-amount:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.arith-unit{padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;font-size:15px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;box-sizing:border-box;font-family:inherit}.arith-unit:focus{outline:none;border-color:var(--primary-color)}.date-result{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:20px;min-height:60px;margin-bottom:12px}.date-placeholder{color:var(--text-light);font-style:italic;text-align:center;padding:20px 0;margin:0}.date-result-primary{text-align:center;padding:16px 0;margin-bottom:16px;border-bottom:1px solid var(--border-color)}.drp-big{font-size:22px;font-weight:700;color:var(--text-color);margin-bottom:4px}.drp-unit{font-size:13px;color:var(--text-light);font-family:Fira Code,Courier New,monospace}.date-result-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.date-metric{background:var(--bg-secondary);border-radius:8px;padding:12px 14px;text-align:center}.date-metric-copy{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}.date-metric-copy>div{min-width:0;overflow:hidden}.dm-value{display:block;font-family:Fira Code,Courier New,monospace;font-size:14px;font-weight:600;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-label{display:block;font-size:11px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}.date-metric-copy .dm-value{font-size:13px}.date-result-meta{text-align:center;font-size:13px;color:var(--text-light);padding-top:8px}.btn-copy-inline{flex-shrink:0;width:32px;height:32px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-primary);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0}.btn-copy-inline:hover{background:var(--bg-secondary);border-color:var(--primary-color);transform:scale(1.05)}.date-result-actions{display:flex;gap:12px;margin-bottom:24px}.date-result-actions .btn{flex:1}.date-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(16px);padding:10px 24px;background:#1e293b;color:#fff;font-size:14px;font-weight:600;border-radius:8px;box-shadow:0 4px 16px #0003;z-index:99999;opacity:0;transition:all .25s ease;pointer-events:none;font-family:inherit}.date-toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 768px){.date-range-inputs{grid-template-columns:1fr}.arith-controls{flex-direction:row;flex-wrap:wrap}.date-result-grid-2col{grid-template-columns:1fr}.date-result-actions{flex-direction:column}.drp-big{font-size:18px}}.base-tool-container{max-width:820px}.base-options{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}.base-opt-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-color);font-weight:500}.base-opt-select{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-size:13px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;font-family:inherit}.base-opt-select:focus{outline:none;border-color:var(--primary-color)}.base-opt-check{cursor:pointer;-webkit-user-select:none;user-select:none}.base-opt-check input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--primary-color)}.base-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.base-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:16px;transition:border-color .2s,box-shadow .2s}.base-card-highlight{background:#eef2ff;border-color:#c7d2fe}.base-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.base-card-header h3{font-size:13px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin:0}.base-card-hint{display:block;font-size:11px;color:var(--text-light);opacity:.7;margin-top:1px;font-style:italic}.base-opt-hint{font-size:11px;color:var(--text-light);opacity:.6}.btn-copy-base{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:14px;padding:4px 8px;opacity:.5;transition:opacity .15s,background .15s}.btn-copy-base:hover{opacity:1;background:var(--bg-primary)}.base-card-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;font-family:Fira Code,Courier New,monospace;font-size:18px;background:var(--bg-primary);color:var(--text-color);transition:border-color .15s}.base-card-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.base-card-error{display:none;color:#ef4444;font-size:12px;font-weight:500;margin-top:6px}.base-card-error-state{border-color:#ef4444!important}.base-input-error{border-color:#ef4444!important;color:#ef4444!important}.base-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(12px);padding:8px 20px;background:#1e293b;color:#fff;font-size:13px;font-weight:600;border-radius:8px;box-shadow:0 4px 16px #0003;z-index:99999;opacity:0;transition:all .2s ease;pointer-events:none;font-family:inherit}.base-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.base-summary{margin-top:16px;padding:12px 16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;text-align:center}.base-summary-text{font-family:Fira Code,Courier New,monospace;font-size:14px;color:#065f46;word-break:break-all}.base-steps{margin-top:12px;border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.base-steps-toggle{padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-light);background:var(--bg-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none}.base-steps-toggle::-webkit-details-marker{display:none}.base-steps-toggle:before{content:"▶ ";font-size:10px}.base-steps[open] .base-steps-toggle:before{content:"▼ "}.base-steps-toggle:hover{color:var(--primary-color)}.base-steps-content{padding:12px 16px;background:var(--bg-primary)}.base-steps-pre{font-family:Fira Code,Courier New,monospace;font-size:13px;line-height:1.8;color:var(--text-color);white-space:pre-wrap;word-break:break-all;margin:0;background:none;border:none;padding:0}.base-examples-section{background-color:#f0fdf4;padding:60px 0}.base-examples-section h2{text-align:center;font-size:24px;font-weight:700;margin-bottom:32px;color:var(--text-color)}.base-examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.base-example-card{background:#fff;border-radius:10px;border:1px solid #bbf7d0;cursor:pointer;transition:all .2s;overflow:hidden}.base-example-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px);border-color:#86efac}.base-example-card .example-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#f0fdf4;border-bottom:1px solid #d1fae5}.base-example-card .example-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#059669;background:#d1fae5;padding:3px 10px;border-radius:5px}.base-example-card .example-arrow{color:#9ca3af;font-size:16px;font-weight:600}.base-example-card .example-body{padding:14px 16px}.base-example-card .example-desc{font-size:13px;font-weight:600;color:var(--text-color);margin:0 0 8px;line-height:1.4}.base-example-card .example-input{font-family:Fira Code,Courier New,monospace;font-size:13px;color:#475569;margin:0;line-height:1.6;word-break:break-all}.base-examples-subtitle{text-align:center;font-size:14px;color:var(--text-light);margin:-20px 0 28px}.example-values{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.ev-item{display:flex;align-items:center;gap:6px;font-family:Fira Code,Courier New,monospace;font-size:12px;color:var(--text-color);background:#f8fafc;border-radius:5px;padding:5px 8px;overflow:hidden;white-space:nowrap}.ev-base{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#059669;background:#d1fae5;padding:1px 5px;border-radius:3px;flex-shrink:0}@media (max-width: 768px){.base-cards{grid-template-columns:1fr}.base-options{flex-direction:column;align-items:flex-start}.color-results-grid,.temp-results-grid,.base-examples-grid,.color-examples-grid,.temp-examples-grid,.unit-examples-grid{grid-template-columns:1fr}}.faq-category{margin-bottom:48px}.faq-category:last-child{margin-bottom:0}.faq-category>h3{font-size:20px;color:var(--primary-color);margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--border-color);display:flex;align-items:center;gap:8px}.faq-category>h3:before{content:"";display:inline-block;width:4px;height:20px;background-color:var(--primary-color);border-radius:2px}.faq-example{margin-top:16px;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.faq-item.active .faq-example{max-height:1000px;padding:16px}.faq-example p{margin-bottom:8px;font-weight:600}.faq-example p:last-child{margin-bottom:0}.faq-label{display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;margin-bottom:8px!important}.faq-input{background-color:#ef44441a;color:#dc2626;border:1px solid rgba(239,68,68,.2)}.faq-output{background-color:#22c55e1a;color:#16a34a;border:1px solid rgba(34,197,94,.2)}.faq-example pre{background-color:var(--bg-color);padding:12px 16px;border-radius:var(--border-radius);border:1px solid var(--border-color);font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all;color:var(--text-color);margin:8px 0}.faq-example code{background-color:var(--bg-color);padding:2px 6px;border-radius:4px;font-family:Fira Code,monospace;font-size:13px;color:var(--primary-color);border:1px solid var(--border-color)}.page-faq .faq-grid{display:flex;flex-direction:column;gap:16px}.page-faq .faq-item{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:24px;box-shadow:var(--shadow-sm);transition:var(--transition)}.page-faq .faq-item:hover{box-shadow:var(--shadow-md);border-color:var(--primary-color)}.page-faq .faq-question{font-size:17px;margin-bottom:12px;color:var(--text-color)}.page-faq .faq-answer{color:var(--text-light);line-height:1.7}.page-faq .faq-answer code{background-color:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:13px;font-family:var(--font-mono)}.page-faq .faq-answer strong{color:var(--text-color);font-weight:600}.page-faq .faq-answer .faq-code{background-color:#1e1e2e;color:#cdd6f4;padding:12px 16px;border-radius:6px;font-family:var(--font-mono);font-size:13px;line-height:1.5;margin-top:10px;overflow-x:auto;white-space:pre;border:1px solid #313244}.page-faq .faq-example{background-color:transparent;border:none;border-radius:0;margin-top:12px;padding:0}.page-faq .faq-example pre{background-color:var(--bg-secondary);padding:16px;border-radius:var(--border-radius);border:1px solid var(--border-color);font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all;color:var(--text-color);margin:0}.page-faq .faq-example p{margin-bottom:8px;font-weight:600;color:var(--text-color)}.page-faq .faq-example p:last-child{margin-bottom:0}.page-faq .faq-intro{color:var(--text-light);line-height:1.8;margin-bottom:24px;font-size:15px}.page-faq .faq-intro code{background-color:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:14px;font-family:var(--font-mono)}@media (prefers-color-scheme: dark){.faq-example{background-color:#ffffff0d}.faq-example pre{background-color:#0003;border-color:#ffffff1a}.page-faq .faq-item{background-color:#ffffff08}}.post-list{display:flex;flex-direction:column;gap:24px}.post-card{display:block;padding:24px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius);text-decoration:none;color:inherit;transition:var(--transition)}.post-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-color);transform:translateY(-2px)}.post-card-title{font-size:20px;font-weight:600;margin:0 0 8px;color:var(--text-color)}.post-card-date{font-size:14px;color:var(--text-light);display:block;margin-bottom:12px}.post-card-excerpt{font-size:15px;color:var(--text-light);line-height:1.6;margin:0 0 12px}.post-card-tag{display:inline-block;padding:4px 10px;background-color:var(--bg-secondary);border-radius:12px;font-size:12px;font-weight:500;color:var(--primary-color)}.blog-post{padding:40px 0}.post-back-link{display:inline-block;margin-bottom:24px;color:var(--primary-color);text-decoration:none;font-size:15px}.post-back-link:hover{text-decoration:underline}.post-header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-color)}.post-title{font-size:32px;font-weight:700;margin:0 0 12px;color:var(--text-color);line-height:1.3}.post-meta{font-size:14px;color:var(--text-light)}.post-content{font-size:16px;line-height:1.8;color:var(--text-color)}.post-content h2{font-size:24px;font-weight:600;margin-top:32px;margin-bottom:16px;color:var(--text-color)}.post-content h3{font-size:18px;font-weight:600;margin-top:24px;margin-bottom:12px;color:var(--text-color)}.post-content p{margin-bottom:16px}.post-content ul,.post-content ol{margin-bottom:16px;padding-left:24px}.post-content li{margin-bottom:8px}.post-content a{color:var(--primary-color)}.post-content code{background-color:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:14px;font-family:var(--font-mono)}.post-content blockquote{border-left:4px solid var(--primary-color);padding:12px 16px;margin:16px 0;background-color:var(--bg-secondary);border-radius:0 8px 8px 0}.post-content blockquote p{margin-bottom:0}.post-content table{width:100%;border-collapse:collapse;margin-bottom:16px}.post-table th,.post-table td{padding:12px 16px;border:1px solid var(--border-color);text-align:left}.post-table th{background-color:var(--bg-secondary);font-weight:600}.post-table td{font-size:14px}.post-table code{background-color:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:13px}@media (prefers-color-scheme: dark){.post-card{background-color:#ffffff08}.post-card-tag{background-color:#6366f126}.post-content blockquote,.post-table th{background-color:#ffffff0d}}.diff-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:var(--bg-secondary);border-radius:var(--border-radius) var(--border-radius) 0 0;border:1px solid var(--border-color);border-bottom:none;flex-wrap:wrap;gap:12px}.diff-toolbar-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.diff-toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.view-toggle{display:flex;gap:0;background-color:var(--bg-color);border-radius:6px;border:1px solid var(--border-color);overflow:hidden}.view-toggle-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:none;background:transparent;color:var(--text-light);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.view-toggle-btn:hover{color:var(--text-color);background-color:var(--bg-secondary)}.view-toggle-btn.active{background-color:var(--primary-color);color:#fff}.diff-mode-toggle{display:flex;gap:0}.diff-mode-toggle .tab-btn{padding:6px 14px;font-size:13px;border-radius:0}.diff-mode-toggle .tab-btn:first-child{border-radius:6px 0 0 6px}.diff-mode-toggle .tab-btn:last-child{border-radius:0 6px 6px 0}.diff-inputs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border-color);border-bottom:none}.diff-input-pane{display:flex;flex-direction:column}.diff-input-pane:first-child{border-right:1px solid var(--border-color)}.diff-input-header{padding:8px 14px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.diff-textarea{width:100%;min-height:160px;padding:14px;border:none;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;resize:vertical;background:var(--bg-primary);color:var(--text-color)}.diff-textarea:focus{outline:none;background:var(--bg-color)}.diff-textarea::placeholder{color:var(--text-light)}.diff-output{border:1px solid var(--border-color);border-top:none;border-radius:0 0 var(--border-radius) var(--border-radius);overflow:hidden;background:var(--bg-color);min-height:100px}.diff-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-light);gap:12px}.diff-empty-state svg{opacity:.4}.diff-empty-state p{font-size:14px;margin:0}.diff-table-container{overflow-x:auto}.diff-table{width:100%;border-collapse:collapse;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;table-layout:fixed}.diff-header-row th{padding:8px 12px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);font-size:12px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;text-align:left}.diff-row td{padding:0;border-top:1px solid var(--border-color);vertical-align:top}.diff-row:first-child td{border-top:none}.diff-line-num{width:50px;min-width:50px;padding:2px 8px;text-align:right;color:var(--text-light);font-size:12px;-webkit-user-select:none;user-select:none;background-color:var(--bg-secondary);border-right:1px solid var(--border-color)}.diff-line-content{padding:2px 12px;white-space:pre-wrap;word-break:break-all}.diff-context{background-color:var(--bg-color)}.diff-context .diff-line-content{color:var(--text-color)}.diff-remove{background-color:#f8514914}.diff-remove .diff-line-num{background-color:#f851491f}.diff-remove .diff-line-content{color:#c0392b}.diff-add{background-color:#3fb95014}.diff-add .diff-line-num{background-color:#3fb9501f}.diff-add .diff-line-content{color:#27ae60}.diff-empty td{background-color:var(--bg-secondary)}.diff-sign-remove,.diff-sign-add{display:inline-block;width:16px;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}.diff-sign-remove{color:#e74c3c}.diff-sign-add{color:#27ae60}.diff-split-container{display:grid;grid-template-columns:1fr 1fr}.diff-split-pane{overflow-x:auto}.diff-split-pane:first-child{border-right:2px solid var(--border-color)}.diff-pane-header{padding:8px 14px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.diff-pane-header .diff-file-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.diff-split-pane .diff-table{width:100%}.diff-inline-container{padding:16px;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-all}.diff-inline-add{background-color:#3fb95033;color:#27ae60;padding:1px 2px;border-radius:2px}.diff-inline-remove{background-color:#f8514933;color:#e74c3c;padding:1px 2px;border-radius:2px;text-decoration:line-through}.diff-file-label{font-size:13px;font-weight:600}.diff-file-original{color:#e74c3c}.diff-file-modified{color:#27ae60}@media (max-width: 768px){.diff-toolbar{flex-direction:column;align-items:flex-start}.diff-toolbar-left,.diff-toolbar-right{width:100%;justify-content:flex-start}.diff-toolbar-right{flex-wrap:wrap}.diff-toolbar-right .btn{flex:1;min-width:80px;text-align:center}.diff-inputs{grid-template-columns:1fr}.diff-input-pane:first-child{border-right:none;border-bottom:1px solid var(--border-color)}.diff-split-container{grid-template-columns:1fr}.diff-split-pane:first-child{border-right:none;border-bottom:2px solid var(--border-color)}.diff-table{font-size:12px}.diff-line-num{width:40px;min-width:40px}}.compare-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:var(--bg-secondary);border-radius:var(--border-radius) var(--border-radius) 0 0;border:1px solid var(--border-color);border-bottom:none;flex-wrap:wrap;gap:12px}.compare-toolbar-left{display:flex;align-items:center;gap:12px}.compare-toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.compare-mode-toggle{display:flex;gap:0;background-color:var(--bg-color);border-radius:6px;border:1px solid var(--border-color);overflow:hidden}.compare-mode-toggle .mode-btn{padding:6px 14px;border:none;background:transparent;color:var(--text-light);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.compare-mode-toggle .mode-btn:hover{color:var(--text-color);background-color:var(--bg-secondary)}.compare-mode-toggle .mode-btn.active{background-color:var(--primary-color);color:#fff}.compare-inputs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border-color);border-bottom:none}.compare-input-pane{display:flex;flex-direction:column}.compare-input-pane:first-child{border-right:1px solid var(--border-color)}.compare-input-header{padding:8px 14px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.compare-textarea{width:100%;min-height:140px;padding:14px;border:none;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;resize:vertical;background:var(--bg-primary);color:var(--text-color)}.compare-textarea:focus{outline:none;background:var(--bg-color)}.compare-textarea::placeholder{color:var(--text-light)}.compare-result-area{border:1px solid var(--border-color);border-top:none;border-radius:0 0 var(--border-radius) var(--border-radius);overflow:hidden;background:var(--bg-color);min-height:100px}.compare-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-light);gap:12px}.compare-empty-state svg{opacity:.4}.compare-empty-state p{font-size:14px;margin:0}.compare-summary{display:flex;align-items:center;gap:16px;padding:12px 16px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-wrap:wrap}.compare-similarity-badge{display:inline-block;padding:4px 14px;border-radius:20px;font-size:14px;font-weight:700;background-color:#fef3c7;color:#92400e;border:1px solid #fbbf24}.compare-similarity-identical{background-color:#d1fae5;color:#065f46;border-color:#6ee7b7}.compare-stats{font-size:13px;color:var(--text-light)}.compare-split-container{display:grid;grid-template-columns:1fr 1fr}.compare-split-pane{overflow:hidden}.compare-split-pane:first-child{border-right:2px solid var(--border-color)}.compare-pane-header{padding:8px 14px;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.compare-pane-header .compare-file-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.compare-highlighted-text{padding:0;max-height:500px;overflow-y:auto;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6}.compare-line{padding:2px 12px;border-top:1px solid transparent;white-space:pre-wrap;word-break:break-all}.compare-line-same{background-color:var(--bg-color);color:var(--text-color)}.compare-line-same .compare-line-num{color:var(--text-light)}.compare-line-remove{background-color:#f8514914;color:#c0392b}.compare-line-remove .compare-line-num{color:#e74c3c;background-color:#f851491f}.compare-line-add{background-color:#3fb95014;color:#27ae60}.compare-line-add .compare-line-num{color:#27ae60;background-color:#3fb9501f}.compare-line-num{display:inline-block;width:36px;text-align:right;margin-right:10px;color:var(--text-light);font-size:12px;-webkit-user-select:none;user-select:none;padding:0 4px}.compare-remove-mark,.compare-add-mark{display:inline-block;width:16px;font-weight:700;-webkit-user-select:none;user-select:none;text-align:center}.compare-remove-mark{color:#e74c3c}.compare-add-mark{color:#27ae60}.compare-inline-text{padding:16px;font-family:Georgia,Times New Roman,serif;font-size:15px;line-height:1.8;color:var(--text-color);max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}.compare-inline-remove{background-color:#f8514940;color:#c0392b;padding:1px 3px;border-radius:3px;text-decoration:line-through}.compare-inline-add{background-color:#3fb95040;color:#15803d;padding:1px 3px;border-radius:3px;font-weight:600}.compare-identical-block{padding:20px;font-family:Fira Code,Consolas,Monaco,monospace;font-size:13px;line-height:1.6;color:var(--text-color);white-space:pre-wrap;word-break:break-all;background-color:#f0fdf4;border-top:1px solid #bbf7d0}.compare-file-label.file-a{color:#e74c3c}.compare-file-label.file-b{color:#27ae60}@media (max-width: 768px){.compare-toolbar{flex-direction:column;align-items:flex-start}.compare-toolbar-left,.compare-toolbar-right{width:100%;justify-content:flex-start}.compare-toolbar-right .btn{flex:1;min-width:80px;text-align:center}.compare-inputs{grid-template-columns:1fr}.compare-input-pane:first-child{border-right:none;border-bottom:1px solid var(--border-color)}.compare-split-container{grid-template-columns:1fr}.compare-split-pane:first-child{border-right:none;border-bottom:2px solid var(--border-color)}}.color-tool-container{max-width:820px}.color-preview-section{margin-bottom:20px}.color-preview-box{display:flex;align-items:center;gap:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:20px}.color-swatch{width:100px;height:100px;border-radius:12px;border:3px solid #fff;box-shadow:0 4px 16px #00000026;flex-shrink:0;transition:background-color .25s}.color-preview-info{flex:1}.color-preview-name{font-size:16px;font-weight:600;color:var(--text-color);margin-bottom:8px}.color-picker-input{width:48px;height:36px;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;padding:2px;background:var(--bg-primary)}.color-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.color-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:16px;transition:border-color .2s}.color-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.color-card-label{font-size:13px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px}.btn-copy-color{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:14px;padding:4px 8px;opacity:.5;transition:all .15s}.btn-copy-color:hover{opacity:1;background:var(--bg-primary)}.color-card-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;font-family:Fira Code,Courier New,monospace;font-size:16px;background:var(--bg-primary);color:var(--text-color);transition:border-color .15s}.color-card-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.color-card-hint{font-size:11px;color:var(--text-light);opacity:.6;font-style:italic;margin-top:4px}.color-card-error{display:none;color:#ef4444;font-size:12px;font-weight:500;margin-top:4px}.color-card-error-state{border-color:#ef4444!important}.color-input-error{border-color:#ef4444!important;color:#ef4444!important}.color-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(12px);padding:8px 20px;background:#1e293b;color:#fff;font-size:13px;font-weight:600;border-radius:8px;box-shadow:0 4px 16px #0003;z-index:99999;opacity:0;transition:all .2s;pointer-events:none;font-family:inherit}.color-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.color-examples-section{background-color:#f0fdf4;padding:60px 0}.color-examples-section h2{text-align:center;font-size:24px;font-weight:700;margin-bottom:32px;color:var(--text-color)}.color-examples-subtitle{text-align:center;font-size:14px;color:var(--text-light);margin:-20px 0 28px}.color-examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.color-example-card{background:#fff;border-radius:10px;border:1px solid #bbf7d0;cursor:pointer;transition:all .2s;overflow:hidden}.color-example-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px);border-color:#86efac}.color-example-card .example-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#f0fdf4;border-bottom:1px solid #d1fae5}.color-example-card .example-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:5px;text-align:center}.color-example-card .example-arrow{color:#9ca3af;font-size:16px;font-weight:600}.color-example-card .example-body{padding:14px 16px}.color-example-card .example-desc{font-size:13px;font-weight:600;color:var(--text-color);margin:0;line-height:1.4}@media (max-width: 768px){.color-cards{grid-template-columns:1fr}.color-preview-box{flex-direction:column;align-items:center;text-align:center}.color-examples-grid{grid-template-columns:1fr}}.temp-tool-container{max-width:720px}.temp-options{display:flex;align-items:center;gap:16px;margin-bottom:16px}.temp-opt-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-color);font-weight:500}.temp-opt-select{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-size:13px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;font-family:inherit}.temp-opt-select:focus{outline:none;border-color:var(--primary-color)}.temp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.temp-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:16px;transition:border-color .2s}.temp-card-highlight{background:#eef2ff;border-color:#c7d2fe}.temp-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.temp-card-label{font-size:13px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px}.btn-copy-temp{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:14px;padding:4px 8px;opacity:.5;transition:all .15s}.btn-copy-temp:hover{opacity:1;background:var(--bg-primary)}.temp-card-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;font-family:Fira Code,Courier New,monospace;font-size:18px;background:var(--bg-primary);color:var(--text-color);transition:border-color .15s}.temp-card-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.temp-card-hint{font-size:11px;color:var(--text-light);opacity:.6;font-style:italic;margin-top:4px}.temp-card-error{display:none;color:#ef4444;font-size:12px;font-weight:500;margin-top:4px}.temp-card-error-state{border-color:#ef4444!important}.temp-input-error{border-color:#ef4444!important;color:#ef4444!important}.temp-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(12px);padding:8px 20px;background:#1e293b;color:#fff;font-size:13px;font-weight:600;border-radius:8px;box-shadow:0 4px 16px #0003;z-index:99999;opacity:0;transition:all .2s;pointer-events:none;font-family:inherit}.temp-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.temp-examples-section{background-color:#f0fdf4;padding:60px 0}.temp-examples-section h2{text-align:center;font-size:24px;font-weight:700;margin-bottom:32px;color:var(--text-color)}.temp-examples-subtitle{text-align:center;font-size:14px;color:var(--text-light);margin:-20px 0 28px}.temp-examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.temp-example-card{background:#fff;border-radius:10px;border:1px solid #bbf7d0;cursor:pointer;transition:all .2s;overflow:hidden}.temp-example-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px);border-color:#86efac}.temp-example-card .example-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#f0fdf4;border-bottom:1px solid #d1fae5}.temp-example-card .example-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:5px;background:#d1fae5;color:#059669}.temp-example-card .example-arrow{color:#9ca3af;font-size:16px;font-weight:600}.temp-example-card .example-body{padding:14px 16px}.temp-example-card .example-desc{font-size:13px;font-weight:600;color:var(--text-color);margin:0 0 6px}.temp-example-card .example-input{font-family:Fira Code,Courier New,monospace;font-size:13px;color:#475569;margin:0}@media (max-width: 768px){.temp-cards{grid-template-columns:1fr}}.unit-tool-container{max-width:720px}.unit-tool-container .tab-btn.active:after{display:none}.unit-options{display:flex;align-items:center;gap:16px;margin-bottom:16px}.unit-opt-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-color);font-weight:500}.unit-opt-select{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-size:13px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;font-family:inherit}.unit-opt-select:focus{outline:none;border-color:var(--primary-color)}.unit-converter-row{display:flex;align-items:flex-start;gap:12px}.unit-card{flex:1;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:16px;transition:border-color .2s}.unit-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.unit-card-label{font-size:13px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px}.btn-copy-unit{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:14px;padding:4px 8px;opacity:.5;transition:all .15s}.btn-copy-unit:hover{opacity:1;background:var(--bg-primary)}.unit-card-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;font-family:Fira Code,Courier New,monospace;font-size:18px;background:var(--bg-primary);color:var(--text-color);margin-bottom:10px;transition:border-color .15s}.unit-card-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.unit-card-select{width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;font-size:14px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;font-family:inherit;box-sizing:border-box}.unit-card-select:focus{outline:none;border-color:var(--primary-color)}.unit-card-result{font-family:Fira Code,Courier New,monospace;font-size:28px;font-weight:700;color:var(--primary-color);padding:8px 0 10px;min-height:44px;word-break:break-all}.unit-card-hint{font-size:11px;color:var(--text-light);opacity:.6;font-style:italic;margin-top:2px}.unit-card-error{display:none;color:#ef4444;font-size:12px;font-weight:500;margin-top:4px}.unit-card-error-state{border-color:#ef4444!important}.unit-input-error{border-color:#ef4444!important;color:#ef4444!important}.btn-swap{flex-shrink:0;width:44px;height:44px;margin-top:28px;border:1px solid var(--border-color);border-radius:50%;background:var(--bg-primary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text-light)}.btn-swap:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:rotate(180deg)}.unit-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(12px);padding:8px 20px;background:#1e293b;color:#fff;font-size:13px;font-weight:600;border-radius:8px;box-shadow:0 4px 16px #0003;z-index:99999;opacity:0;transition:all .2s;pointer-events:none;font-family:inherit}.unit-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.unit-examples-section{background-color:#f0fdf4;padding:60px 0}.unit-examples-section h2{text-align:center;font-size:24px;font-weight:700;margin-bottom:32px;color:var(--text-color)}.unit-examples-subtitle{text-align:center;font-size:14px;color:var(--text-light);margin:-20px 0 28px}.unit-examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.unit-example-card{background:#fff;border-radius:10px;border:1px solid #bbf7d0;cursor:pointer;transition:all .2s;overflow:hidden}.unit-example-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px);border-color:#86efac}.unit-example-card .example-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#f0fdf4;border-bottom:1px solid #d1fae5}.unit-example-card .example-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 10px;border-radius:5px;background:#d1fae5;color:#059669}.unit-example-card .example-arrow{color:#9ca3af;font-size:16px;font-weight:600}.unit-example-card .example-body{padding:14px 16px}.unit-example-card .example-desc{font-size:13px;font-weight:600;color:var(--text-color);margin:0 0 6px}.unit-example-card .example-input{font-family:Fira Code,Courier New,monospace;font-size:13px;color:#475569;margin:0}@media (max-width: 768px){.unit-converter-row{flex-direction:column}.btn-swap{margin-top:0;align-self:center;transform:rotate(90deg)}.btn-swap:hover{transform:rotate(270deg)}}.curr-tool-container{max-width:780px}.curr-status{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--bg-secondary);border-radius:8px;margin-bottom:16px;font-size:13px}.curr-status-text{font-weight:500}.curr-status-time{color:var(--text-light);font-size:12px}.curr-status-link{font-size:12px;color:var(--primary-color);text-decoration:none;font-weight:500;white-space:nowrap}.curr-status-link:hover{text-decoration:underline}.curr-quick-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.curr-quick-btn{padding:8px 14px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--text-color)}.curr-quick-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.curr-quick-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.curr-converter-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px}.curr-card{flex:1;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:16px;transition:border-color .2s}.curr-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.curr-card-label{font-size:13px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px}.btn-copy-curr{background:none;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;font-size:14px;padding:4px 8px;opacity:.5;transition:all .15s}.btn-copy-curr:hover{opacity:1;background:var(--bg-primary)}.curr-card-input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-color);border-radius:8px;font-family:Fira Code,Courier New,monospace;font-size:20px;background:var(--bg-primary);color:var(--text-color);margin-bottom:10px;transition:border-color .15s}.curr-card-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a}.curr-card-select{width:100%;padding:9px 10px;border:1px solid var(--border-color);border-radius:8px;font-size:14px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;font-family:inherit;box-sizing:border-box}.curr-card-select:focus{outline:none;border-color:var(--primary-color)}.curr-card-result{font-family:Fira Code,Courier New,monospace;font-size:32px;font-weight:700;color:var(--primary-color);padding:6px 0 8px;min-height:48px;word-break:break-all}.curr-card-rate{font-size:12px;color:var(--text-light);margin-bottom:10px}.curr-card-error{display:none;color:#ef4444;font-size:12px;font-weight:500;margin-top:4px}.curr-card-error-state{border-color:#ef4444!important}.curr-input-error{border-color:#ef4444!important;color:#ef4444!important}.btn-swap-curr{flex-shrink:0;width:44px;height:44px;margin-top:28px;border:1px solid var(--border-color);border-radius:50%;background:var(--bg-primary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text-light)}.btn-swap-curr:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:rotate(180deg)}.curr-list{margin-top:8px}.curr-list-title{font-size:14px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px}.curr-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}.curr-list-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-secondary);border-radius:6px;border:1px solid var(--border-color)}.curr-list-currency{font-size:13px;font-weight:600;color:var(--text-light)}.curr-list-value{font-family:Fira Code,Courier New,monospace;font-size:13px;font-weight:600;color:var(--text-color)}.curr-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(12px);padding:8px 20px;background:#1e293b;color:#fff;font-size:13px;font-weight:600;border-radius:8px;box-shadow:0 4px 16px #0003;z-index:99999;opacity:0;transition:all .2s;pointer-events:none;font-family:inherit}.curr-toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 768px){.curr-converter-row{flex-direction:column}.btn-swap-curr{margin-top:0;align-self:center;transform:rotate(90deg)}.btn-swap-curr:hover{transform:rotate(270deg)}.curr-list-grid{grid-template-columns:repeat(2,1fr)}}.tabs{display:flex;gap:8px;margin-bottom:20px}.tab-btn{padding:10px 20px;border:2px solid var(--border-color);background:var(--bg-primary);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.tab-btn:hover{border-color:var(--primary-color)}.tab-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.qr-template-section{margin-bottom:16px}.template-selector-wrapper{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;flex-wrap:wrap}.template-selector-wrapper label{font-size:14px;font-weight:500;color:var(--text-color);white-space:nowrap}.qr-template-select{flex:1;min-width:200px;max-width:300px}.template-help-text{font-size:12px;color:var(--text-light);flex:1;min-width:250px;line-height:1.4}.qr-settings{display:flex;gap:20px;margin-bottom:20px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;flex-wrap:wrap}.qr-setting-group{display:flex;align-items:center;gap:10px}.qr-setting-group label{font-size:14px;font-weight:500;color:var(--text-color);white-space:nowrap}.qr-select{padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;background:var(--bg-primary);color:var(--text-color);cursor:pointer;min-width:180px;transition:all .2s}.qr-select:hover{border-color:var(--primary-color)}.qr-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.qr-output-area{min-height:300px;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:12px;transition:all .3s ease}.qr-output-area canvas,.qr-output-area img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #0000001a}.qr-empty-state{text-align:center;color:var(--text-light)}.qr-empty-state svg{margin-bottom:16px;opacity:.5}.qr-empty-state p{font-size:14px;margin:0}@media (max-width: 768px){.template-selector-wrapper{flex-direction:column;align-items:stretch;gap:8px}.qr-template-select{min-width:auto;max-width:none}.template-help-text{min-width:auto;font-size:11px}.qr-settings{flex-direction:column;gap:12px}.qr-setting-group{width:100%}.qr-select{flex:1;min-width:auto}}.batch-input-tabs{display:flex;gap:8px;margin-bottom:16px}.batch-tab-btn{padding:8px 16px;border:1px solid var(--border-color);background:var(--bg-primary);border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s}.batch-tab-btn:hover{border-color:var(--primary-color)}.batch-tab-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.batch-input-section{margin-bottom:20px}.batch-input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.batch-input-actions{display:flex;align-items:center;gap:12px}.batch-input-header label{font-size:14px;font-weight:500;color:var(--text-color)}.batch-line-count{font-size:13px;color:var(--text-light)}.batch-textarea{width:100%;min-height:200px;padding:12px;border:1px solid var(--border-color);border-radius:8px;font-family:Fira Code,monospace;font-size:13px;line-height:1.6;resize:vertical}.batch-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.file-upload-area{border:2px dashed var(--border-color);border-radius:12px;padding:40px 20px;text-align:center;transition:all .3s}.file-upload-area:hover{border-color:var(--primary-color);background:#4f46e505}.file-input-hidden{display:none}.file-upload-label{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-light)}.file-upload-label svg{color:var(--primary-color)}.file-upload-label p{margin:0;font-size:14px;font-weight:500}.file-upload-label small{font-size:12px;color:var(--text-light)}.file-template-info{margin-top:12px;padding:12px 16px;background:#f0f9ff;border-left:4px solid #3b82f6;border-radius:6px;font-size:13px}.file-template-info p{margin:0;color:#1e40af}.template-link{color:var(--primary-color);text-decoration:none;font-weight:500;transition:all .2s}.template-link:hover{text-decoration:underline;color:#4338ca}.file-preview{margin-top:16px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px}.file-preview h4{font-size:14px;font-weight:600;margin:0 0 12px;color:var(--text-color)}.preview-table{width:100%;border-collapse:collapse;font-size:12px}.preview-table td{padding:6px 10px;border-bottom:1px solid var(--border-color)}.preview-table td:first-child{font-weight:600;color:var(--primary-color);width:40px}.file-options{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color)}.file-options label{font-size:13px;color:var(--text-color);cursor:pointer}.file-options input[type=checkbox]{margin-right:6px}.batch-settings{display:flex;gap:16px;margin-bottom:20px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;flex-wrap:wrap}.batch-setting-group{display:flex;align-items:center;gap:8px}.batch-setting-group label{font-size:13px;font-weight:500;color:var(--text-color);white-space:nowrap}.qr-input-field{padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;background:var(--bg-primary);color:var(--text-color);min-width:120px}.qr-input-field:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.batch-actions{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.batch-actions .btn{min-height:44px;padding:10px 24px}.batch-progress{flex:1;display:flex;align-items:center;gap:12px;min-width:200px}.progress-bar{flex:1;height:8px;background:var(--border-color);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),#6366f1);transition:width .3s ease;border-radius:4px}#progress-text{font-size:13px;color:var(--text-light);white-space:nowrap}.batch-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-bottom:24px}.batch-qr-item{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:all .2s}.batch-qr-item:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.batch-qr-code{display:flex;align-items:center;justify-content:center}.batch-qr-label{font-size:12px;color:var(--text-color);text-align:center;word-break:break-all;max-width:100%;line-height:1.4}.batch-download-single{width:100%}.batch-download-actions{display:flex;gap:16px;align-items:center;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;margin-top:20px}.total-count{font-size:14px;color:var(--text-light)}@media (max-width: 768px){.batch-input-header{flex-direction:column;align-items:flex-start;gap:8px}.batch-settings{flex-direction:column;gap:12px}.batch-setting-group{width:100%}.batch-setting-group .qr-select,.batch-setting-group .qr-input-field{flex:1}.batch-actions{flex-direction:column}.batch-progress{width:100%}.batch-results{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.batch-download-actions{flex-direction:column}}.decode-input-tabs{display:flex;gap:8px;margin-bottom:20px}.decode-tab-btn{padding:10px 20px;border:2px solid var(--border-color);background:var(--bg-primary);border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.decode-tab-btn:hover{border-color:var(--primary-color)}.decode-tab-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.decode-input-section{margin-bottom:24px}.decode-upload-area{min-height:200px}.paste-hint{margin:8px 0 4px;font-size:13px;color:var(--primary-color);font-weight:500}.decode-url-input-group{margin-bottom:16px}.decode-url-input-group label{display:block;font-size:14px;font-weight:500;color:var(--text-color);margin-bottom:8px}.decode-url-input-wrapper{display:flex;gap:12px}.decode-url-field{flex:1}.camera-container{position:relative;background:#000;border-radius:12px;overflow:hidden;min-height:300px}#camera-video{width:100%;height:auto;display:block}.camera-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;background:#000000b3}.camera-placeholder svg{opacity:.7}.camera-placeholder p{margin:0;font-size:14px}.camera-controls{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:10}.decode-result{margin-top:24px;padding:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px}.decode-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.decode-result-header h3{font-size:16px;font-weight:600;margin:0;color:var(--text-color)}.decode-result-actions{display:flex;gap:8px}.decode-result-content{display:flex;flex-direction:column;gap:12px}.decoded-type-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase}.type-url{background:#dbeafe;color:#1e40af}.type-vcard{background:#dcfce7;color:#166534}.type-wifi{background:#fef3c7;color:#92400e}.type-email{background:#f3e8ff;color:#6b21a8}.type-phone{background:#fce7f3;color:#9f1239}.type-text{background:#f3f4f6;color:#374151}.decoded-text{font-family:Fira Code,monospace;font-size:13px;color:var(--text-color);background:var(--bg-primary);padding:12px;border-radius:6px;word-break:break-all;max-height:150px;overflow-y:auto}.decoded-formatted{padding:12px;background:#fff;border:1px solid var(--border-color);border-radius:6px}.decoded-link{color:var(--primary-color);text-decoration:none;word-break:break-all}.decoded-link:hover{text-decoration:underline}.vcard-display p,.wifi-display p{margin:8px 0;font-size:14px}.wifi-password{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-family:Fira Code,monospace}.copy-wifi-password{margin-left:8px}@media (max-width: 768px){.decode-input-tabs{flex-wrap:wrap}.decode-tab-btn{flex:1;min-width:100px}.decode-url-input-wrapper{flex-direction:column}.decode-result-header{flex-direction:column;align-items:flex-start;gap:12px}.decode-result-actions{width:100%}.decode-result-actions .btn{flex:1}}.datetime-picker-container{display:flex;gap:12px}.input-date,.input-time{flex:1;padding:12px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:16px;transition:var(--transition)}.input-date:focus,.input-time:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.datetime-custom-container{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.datetime-sel{padding:10px 8px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:15px;background:var(--bg-primary, #fff);color:var(--text-primary);cursor:pointer;transition:var(--transition);font-family:inherit}.datetime-sel-month{min-width:120px}.datetime-sel:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.datetime-num{padding:10px 6px;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:15px;font-family:var(--font-mono, "SF Mono", "Cascadia Code", monospace);background:var(--bg-primary, #fff);color:var(--text-primary);text-align:center;transition:var(--transition);-moz-appearance:textfield}.datetime-num::-webkit-inner-spin-button,.datetime-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.datetime-num:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.datetime-num-day{width:52px}.datetime-num-year{width:68px}.datetime-num-hms{width:48px}.datetime-sep{color:var(--text-light);font-size:15px;-webkit-user-select:none;user-select:none}.datetime-sep-time{margin:0 6px}.datetime-colon{color:var(--text-light);font-size:15px;font-weight:700;-webkit-user-select:none;user-select:none}