*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:Monaco,Menlo,Ubuntu Mono,monospace}.container{padding:20px}.header{margin-bottom:30px}.header h1{color:#333;margin-bottom:10px}.header p{color:#666;font-size:16px}.main-content{grid-gap:20px;gap:20px;margin-bottom:20px}.input-section,.output-section{border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:20px}.section-title{color:#333;font-size:18px;margin-bottom:15px}.textarea{border:2px solid #e1e5e9;border-radius:6px;height:400px;outline:none;padding:15px;transition:border-color .2s}.textarea:focus{border-color:#007bff}.textarea.error{border-color:#dc3545}.textarea.success{border-color:#28a745}.controls{gap:10px;margin-top:15px}.btn{align-items:center;display:flex;font-size:14px;gap:5px;padding:10px 20px;transition:all .2s}.btn:hover{transform:translateY(-1px)}.btn-primary{background-color:#007bff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d}.btn-secondary:hover{background-color:#545b62}.btn-success{background-color:#28a745}.btn-success:hover{background-color:#1e7e34}.indent-control{gap:10px}.indent-control label{color:#666;font-size:14px}.indent-control select{border:1px solid #ddd;font-size:14px;padding:5px 10px}.status{font-size:14px;margin-top:15px;padding:10px}.status.error{background-color:#f8d7da}.status.success{background-color:#d4edda}.status.info{background-color:#d1ecf1}.stats{font-size:12px;gap:20px;margin-top:10px}.output-tabs{gap:5px;margin-bottom:15px}.tab{background:#f8f9fa;border-radius:4px 4px 0 0;color:#666;font-size:14px;padding:8px 16px;transition:all .2s}.tab.active{background:#007bff;color:#fff}.tab:hover:not(.active){background:#e9ecef}@media (max-width:768px){.main-content{grid-template-columns:1fr}.controls,.stats{justify-content:center}}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;color:#fff;padding:20px}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.json-key{color:#0451a5;font-weight:700}.json-string{color:#a31515}.json-number{color:#098658}.json-boolean{color:#00f}.json-null{color:grey}.loading-spinner{animation:spin 1s linear infinite;border:2px solid #f3f3f3;border-radius:50%;border-top-color:#007bff;display:inline-block;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.app{background-color:#f8f9fa;min-height:100vh}.navigation{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;display:flex;justify-content:space-between;padding:1rem 2rem}.nav-brand h1{color:#fff;font-size:1.5rem;font-weight:600;margin:0}.nav-links{display:flex;gap:1rem}.nav-btn{background:#fff3;border:2px solid #ffffff4d;border-radius:25px;color:#fff;cursor:pointer;font-weight:500;padding:.5rem 1rem;transition:all .3s ease}.nav-btn:hover{background:#ffffff4d;transform:translateY(-2px)}.nav-btn.active{background:#fff;border-color:#fff;color:#667eea}.container{margin:0 auto;max-width:1200px;padding:2rem}.header{margin-bottom:2rem;text-align:center}.header h1{color:#2c3e50;font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.header p{color:#7f8c8d;font-size:1.1rem}.main-content{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr;margin-top:2rem}.input-section,.output-section{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;padding:1.5rem}.section-title{border-bottom:2px solid #3498db;color:#2c3e50;font-size:1.3rem;font-weight:600;margin-bottom:1rem;padding-bottom:.5rem}.textarea{background-color:#fafafa;border:2px solid #e9ecef;border-radius:8px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.5;min-height:300px;padding:1rem;resize:vertical;transition:border-color .3s ease;width:100%}.textarea:focus{background-color:#fff;border-color:#3498db;outline:none}.textarea.success{border-color:#27ae60}.textarea.error{border-color:#e74c3c}.btn{border:none;border-radius:6px;cursor:pointer;font-weight:500;margin-bottom:.5rem;margin-right:.5rem;padding:.75rem 1.5rem;transition:all .3s ease}.btn:disabled{cursor:not-allowed;opacity:.6}.btn-primary{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.btn-primary:hover:not(:disabled){box-shadow:0 4px 15px #3498db66;transform:translateY(-2px)}.btn-secondary{background:#95a5a6;color:#fff}.btn-secondary:hover:not(:disabled){background:#7f8c8d;transform:translateY(-2px)}.btn-success{background:linear-gradient(135deg,#27ae60,#229954);color:#fff}.btn-success:hover:not(:disabled){box-shadow:0 4px 15px #27ae6066;transform:translateY(-2px)}.btn-info{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff}.btn-info:hover:not(:disabled){box-shadow:0 4px 15px #17a2b866;transform:translateY(-2px)}.controls{flex-wrap:wrap;margin-top:1rem}.controls,.indent-control{align-items:center;display:flex;gap:.5rem}.indent-control{margin-left:auto}.indent-control label{color:#2c3e50;font-weight:500}.indent-control select{background:#fff;border:2px solid #e9ecef;border-radius:4px;padding:.5rem}.status{border-radius:6px;font-weight:500;margin-top:1rem;padding:.75rem}.status.success{background:#d4edda;border:1px solid #c3e6cb;color:#155724}.status.error{background:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.status.info{background:#d1ecf1;border:1px solid #bee5eb;color:#0c5460}.output-tabs{border-bottom:2px solid #e9ecef;display:flex;margin-bottom:1rem}.tab{background:none;border:none;border-bottom:2px solid #0000;color:#7f8c8d;cursor:pointer;font-weight:500;padding:.75rem 1.5rem;transition:all .3s ease}.tab:hover{color:#2c3e50}.tab.active{border-bottom-color:#3498db;color:#3498db}.stats{background:#f8f9fa;border-radius:6px;color:#6c757d;font-size:.9rem;margin-top:1rem;padding:.75rem}.base64-tool{background-color:#f8f9fa;min-height:100vh;padding:2rem}.mode-selector{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.file-input-section{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;margin:1rem 0;padding:1rem}.file-label{color:#495057;display:block;font-weight:500;margin-bottom:.5rem}.file-input{background:#fff;border:1px solid #ced4da;width:100%}.file-info,.file-input{border-radius:4px;padding:.5rem}.file-info{background:#e9ecef;color:#495057;font-size:.9rem;margin-top:.5rem}@media (max-width:768px){.navigation{flex-direction:column;gap:1rem;text-align:center}.nav-links{justify-content:center}.main-content{gap:1rem;grid-template-columns:1fr}.container{padding:1rem}.header h1{font-size:2rem}.controls{align-items:stretch;flex-direction:column}.indent-control{justify-content:center;margin-left:0}.stats{flex-direction:column;gap:.5rem}}.color-picker-section{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;margin-bottom:1.5rem;padding:1rem}.color-picker-section label{color:#495057;display:block;font-weight:500;margin-bottom:.5rem}.color-picker-container{align-items:center;display:flex;gap:1rem}.color-picker{border:none;cursor:pointer}.color-picker,.color-preview{border-radius:8px;box-shadow:0 2px 8px #0000001a;height:60px;width:60px}.color-preview{border:2px solid #dee2e6}.input-mode-selector{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem}.input-group{margin-bottom:1rem}.input-group label{color:#495057;display:block;font-weight:500;margin-bottom:.5rem}.color-input{border:2px solid #e9ecef;border-radius:6px;font-size:1rem;padding:.75rem;transition:border-color .3s ease;width:100%}.color-input:focus{border-color:#3498db;outline:none}.hsl-inputs,.rgb-inputs{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}.preset-colors{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.preset-btn{font-size:.9rem;padding:.5rem .75rem;text-transform:capitalize}.color-output{gap:1rem}.color-format,.color-output{display:flex;flex-direction:column}.color-format{gap:.5rem}.color-format label{color:#2c3e50;font-size:1.1rem;font-weight:600}.output-row{align-items:center;display:flex;gap:.5rem}.color-output-field{background-color:#fafafa;border:2px solid #e9ecef;border-radius:6px;flex:1 1;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1rem;padding:.75rem}.copy-btn{padding:.75rem 1rem;white-space:nowrap}.color-info{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;margin-top:1.5rem;padding:1rem}.color-info h3{color:#2c3e50;font-size:1.2rem;margin:0 0 1rem}.color-details{color:#495057;display:flex;flex-direction:column;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;gap:.5rem}@media (max-width:768px){.color-picker-container{justify-content:center}.hsl-inputs,.rgb-inputs{grid-template-columns:1fr}.input-mode-selector{flex-direction:column}.preset-colors{justify-content:center}.output-row{flex-direction:column}.copy-btn{width:100%}.color-details{font-size:.8rem}}.regex-pattern-section{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;margin-bottom:1.5rem;padding:1.5rem}.pattern-input-group{align-items:center;display:flex;gap:.5rem;margin-bottom:1rem}.regex-delimiter{color:#e74c3c;font-size:1.5rem;font-weight:700}.pattern-input,.regex-delimiter{font-family:Monaco,Menlo,Ubuntu Mono,monospace}.pattern-input{border:2px solid #e9ecef;border-radius:6px;flex:1 1;font-size:1rem;padding:.75rem;transition:border-color .3s ease}.pattern-input:focus{border-color:#3498db;outline:none}.pattern-input.success{border-color:#27ae60}.pattern-input.error{border-color:#e74c3c}.flags-input{border:2px solid #e9ecef;border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1rem;padding:.75rem;text-align:center;width:80px}.flags-input:focus{border-color:#3498db;outline:none}.flags-checkboxes{display:flex;gap:1.5rem;margin-bottom:1rem}.flags-checkboxes label{align-items:center;color:#495057;cursor:pointer;display:flex;font-weight:500;gap:.5rem}.flags-checkboxes input[type=checkbox]{accent-color:#3498db;height:16px;width:16px}.common-patterns{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;margin-bottom:1.5rem;padding:1.5rem}.common-patterns h3{color:#2c3e50;font-size:1.2rem;font-weight:600;margin:0 0 1rem}.pattern-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.pattern-btn{font-size:.9rem;padding:.5rem 1rem;white-space:nowrap}.mode-tabs{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;display:flex;justify-content:center;margin-bottom:2rem;padding:.5rem}.mode-tabs .tab{border-radius:8px;flex:1 1;margin:0 .25rem;text-align:center}.mode-tabs .tab.active{background:#3498db;border-bottom-color:#0000;color:#fff}.replace-input{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;margin-top:1rem;padding:1rem}.replace-input label{color:#495057;display:block;font-weight:500;margin-bottom:.5rem}.replace-input-field{border:2px solid #e9ecef;border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1rem;padding:.75rem;width:100%}.replace-input-field:focus{border-color:#3498db;outline:none}.matches-preview{background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;margin-bottom:1.5rem;max-height:300px;overflow-y:auto;padding:1rem}.highlighted-text{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}.regex-match{background:#fff3cd;border:2px solid #ffc107;border-radius:3px;color:#856404;font-weight:700;padding:2px 4px}.matches-list h3{color:#2c3e50;font-size:1.2rem;font-weight:600;margin:0 0 1rem}.matches-container{max-height:400px;overflow-y:auto}.match-item{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;margin-bottom:1rem;padding:1rem}.match-header{align-items:center;display:flex;font-family:Monaco,Menlo,Ubuntu Mono,monospace;justify-content:space-between;margin-bottom:.5rem}.match-position{color:#6c757d;font-size:.9rem;font-weight:400}.match-groups{color:#495057;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem}.group{background:#e9ecef;border-radius:4px;display:inline-block;font-weight:500;margin:0 .25rem;padding:2px 6px}.no-matches{color:#6c757d;font-style:italic;padding:2rem;text-align:center}@media (max-width:768px){.pattern-input-group{flex-wrap:wrap}.flags-checkboxes{flex-direction:column;gap:.5rem}.pattern-buttons{justify-content:center}.mode-tabs{flex-direction:column}.mode-tabs .tab{margin:.25rem 0}.match-header{align-items:flex-start;flex-direction:column;gap:.25rem}.matches-preview{max-height:200px}.matches-container{max-height:300px}}.jwt-parts{display:flex;flex-direction:column;gap:1.5rem}.jwt-part{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;padding:1.5rem}.jwt-part h3{border-bottom:2px solid #3498db;color:#2c3e50;font-size:1.2rem;font-weight:600;margin:0 0 1rem;padding-bottom:.5rem}.jwt-part .textarea{margin-bottom:1rem;min-height:120px}.btn-sm{font-size:.9rem;padding:.5rem 1rem}.token-info{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;margin-top:1.5rem;padding:1.5rem}.token-info h3{border-bottom:2px solid #3498db;color:#2c3e50;font-size:1.3rem;font-weight:600;margin:0 0 1rem;padding-bottom:.5rem}.info-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.info-item{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;padding:.75rem}.info-item strong{color:#2c3e50;display:block;font-weight:600;margin-bottom:.25rem}.expired{color:#e74c3c;font-weight:700}.valid{color:#27ae60;font-weight:700}@media (max-width:768px){.jwt-parts{gap:1rem}.info-grid{grid-template-columns:1fr}.jwt-part .textarea{min-height:100px}.token-info{padding:1rem}.info-item{font-size:.8rem;padding:.5rem}}.language-selector{align-items:center;display:flex;gap:.5rem;margin-bottom:1rem}.language-select{background:#fff;border:1px solid #ddd;border-radius:4px;font-size:.9rem;min-width:120px;padding:.5rem}.code-input,.code-output{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.4;tab-size:2}.code-input{background-color:#f8f9fa}.code-output{background-color:#f1f3f4}.language-selector label{color:#333;font-weight:500}.stats{background-color:#f8f9fa;border-radius:4px;color:#666;display:flex;font-size:.85rem;gap:1rem;margin-top:.5rem;padding:.5rem}.stats span{background-color:#fff;border:1px solid #e9ecef;border-radius:3px;padding:.25rem .5rem}.diff-controls{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding:1.5rem}.control-group,.diff-controls{align-items:center;display:flex}.control-group{gap:.5rem}.control-group label{color:#495057;font-weight:500;white-space:nowrap}.control-group input[type=number],.control-group select{background:#fff;border:2px solid #e9ecef;border-radius:4px;font-size:.9rem;padding:.5rem}.control-group input[type=number]{width:80px}.control-group input[type=checkbox]{accent-color:#3498db;height:16px;width:16px}.control-buttons{display:flex;gap:.5rem;margin-left:auto}.code-input-group{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;margin-bottom:1.5rem}.code-input{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;padding:1.5rem}.code-input h3{border-bottom:2px solid #3498db;color:#2c3e50;font-size:1.2rem;font-weight:600;margin:0 0 1rem;padding-bottom:.5rem}.code-textarea{background-color:#fafafa;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;line-height:1.5;min-height:400px;tab-size:2}.diff-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.diff-header h3{color:#2c3e50;font-size:1.3rem;font-weight:600;margin:0}.loading{color:#6c757d;font-style:italic}.diff-stats{gap:1rem}.diff-stats,.stat{align-items:center;display:flex}.stat{font-size:.9rem;gap:.25rem}.stat-label{color:#6c757d;font-weight:500}.stat-value{background:#f8f9fa;border-radius:4px;font-weight:700;padding:.25rem .5rem}.stat-value.added{background:#d4edda;color:#28a745}.stat-value.removed{background:#f8d7da;color:#dc3545}.diff-output{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 20px #00000014;padding:1.5rem}.no-diff{background:#f8f9fa;border:2px dashed #dee2e6;border-radius:8px;color:#6c757d;font-style:italic;padding:3rem;text-align:center}.unified-diff{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;overflow:hidden}.diff-content{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;line-height:1.4;margin:0;max-height:600px;overflow-x:auto;overflow-y:auto;padding:1rem}.diff-line{margin:0;padding:.25rem .5rem;white-space:pre-wrap;word-break:break-all}.diff-line.diff-added{border-left:4px solid #28a745;color:#155724}.diff-line.diff-removed{border-left:4px solid #dc3545;color:#721c24}.diff-line.diff-hunk{background-color:#e2e3e5;border-left:4px solid #6c757d;color:#495057;font-weight:700}.side-by-side-diff{grid-gap:1px;background:#e9ecef;border-radius:8px;display:grid;gap:1px;grid-template-columns:1fr 1fr;overflow:hidden}.diff-pane{background:#fff}.diff-pane h4{background:#f8f9fa;border-bottom:1px solid #e9ecef;color:#495057;font-size:1rem;font-weight:600;margin:0;padding:.75rem 1rem}.diff-pane .diff-content{max-height:600px;overflow-y:auto;padding:0}.diff-pane .diff-line{border-bottom:1px solid #f8f9fa;display:flex;margin:0;min-height:1.4em;padding:0}.line-number{background:#f8f9fa;border-right:1px solid #e9ecef;color:#6c757d;display:inline-block;flex-shrink:0;font-size:.8rem;padding:.25rem .5rem;text-align:right;-webkit-user-select:none;user-select:none;width:60px}.line-content{flex:1 1;padding:.25rem .5rem;white-space:pre-wrap;word-break:break-all}.diff-line.diff-context{background-color:#fff}.diff-line.diff-context .line-number{background:#f8f9fa}.diff-line.diff-added{background-color:#d4edda}.diff-line.diff-added .line-number{background-color:#c3e6cb;color:#155724}.diff-line.diff-removed{background-color:#f8d7da}.diff-line.diff-removed .line-number{background-color:#f5c6cb;color:#721c24}.diff-line.diff-empty{background-color:#f8f9fa;opacity:.5}.diff-line.diff-empty .line-number{background-color:#e9ecef}@media (max-width:768px){.diff-controls{align-items:stretch;flex-direction:column;gap:1rem}.control-group{justify-content:space-between}.control-buttons{justify-content:center;margin-left:0}.code-input-group{gap:1rem;grid-template-columns:1fr}.code-textarea{min-height:250px}.side-by-side-diff{gap:1rem;grid-template-columns:1fr}.diff-pane{border-radius:8px}.diff-header,.diff-stats{align-items:flex-start;flex-direction:column;gap:.5rem}.line-number{font-size:.75rem;width:50px}.diff-content,.line-content{font-size:.8rem}}@media (max-width:480px){.code-input,.diff-controls,.diff-output{padding:1rem}.code-textarea{min-height:200px}.code-textarea,.diff-stats,.stat-value{font-size:.8rem}.stat-value{padding:.2rem .4rem}}.nav-brand{align-items:flex-start;display:flex;flex-direction:column}.nav-subtitle{font-size:.9rem;margin-top:-.2rem;opacity:.8}.feedback-popup{max-width:350px;opacity:0;position:fixed;transform:translateY(-20px);transition:all .3s ease;z-index:1000}.feedback-popup.visible{opacity:1;transform:translateY(0)}.feedback-popup-content{background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #fff3;border-radius:16px;box-shadow:0 20px 40px #0000004d;padding:1.5rem;position:relative;transform-origin:center;transition:transform .3s ease}.feedback-popup-content:hover{transform:scale(1.02)}.feedback-close-btn{align-items:center;background:#0000004d;border:none;border-radius:50%;color:#ffffffb3;cursor:pointer;display:flex;height:32px;justify-content:center;position:absolute;right:.5rem;top:.5rem;transition:all .3s ease;width:32px}.feedback-close-btn:hover{background:#00000080;color:#fff}.feedback-header{align-items:flex-start;display:flex;gap:1rem;margin-bottom:1rem;padding-right:2rem}.feedback-icon{color:#ff6b9d;font-size:2rem;position:relative}.heart-icon{animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.ping-dot{animation:ping 2s infinite;background:#ff6b9d;border-radius:50%;height:12px;position:absolute;right:-2px;top:-2px;width:12px}@keyframes ping{0%{opacity:1;transform:scale(1)}75%,to{opacity:0;transform:scale(2)}}.feedback-header h3{color:#fff;font-size:1.2rem;font-weight:700;margin:0 0 .5rem}.feedback-header p{color:#ffffffe6;font-size:.9rem;line-height:1.4;margin:0}.feedback-actions{display:flex;flex-wrap:wrap;gap:.5rem}.support-btn{align-items:center;background:linear-gradient(135deg,#ff6b9d,#ff4757);border:none;border-radius:8px;box-shadow:0 4px 15px #ff6b9d66;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:.5rem;padding:.6rem 1rem;transition:all .3s ease}.support-btn:hover{box-shadow:0 6px 20px #ff6b9d99;transform:translateY(-2px)}.feedback-btn{align-items:center;background:linear-gradient(135deg,#4facfe,#00f2fe);border:none;border-radius:8px;box-shadow:0 4px 15px #4facfe66;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:.5rem;padding:.6rem 1rem;transition:all .3s ease}.feedback-btn:hover{box-shadow:0 6px 20px #4facfe99;transform:translateY(-2px)}.later-btn{background:#fff3;border:1px solid #ffffff4d;border-radius:8px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:.6rem 1rem;transition:all .3s ease}.later-btn:hover{background:#ffffff4d}.decoration{animation:bounce 2s infinite;border-radius:50%;position:absolute}.decoration-1{background:gold;height:16px;left:-8px;top:-8px;width:16px}.decoration-2{animation-delay:.5s;background:#4facfe;bottom:-8px;height:12px;right:-8px;width:12px}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.blog-container{background-color:#f8f9fa;min-height:100vh;padding:2rem}.blog-nav{margin-bottom:2rem}.back-to-blog,.back-to-tools{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:500;margin-right:1rem;padding:.75rem 1.5rem;transition:all .3s ease}.back-to-blog:hover,.back-to-tools:hover{box-shadow:0 4px 15px #667eea66;transform:translateY(-2px)}.blog-header{margin-bottom:3rem;text-align:center}.blog-header h1{color:#2c3e50;font-size:3rem;font-weight:700;margin-bottom:1rem}.blog-header p{color:#7f8c8d;font-size:1.2rem;margin:0 auto;max-width:600px}.blog-categories{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:3rem}.category-btn{background:#fff;border:2px solid #e9ecef;border-radius:25px;color:#495057;cursor:pointer;font-weight:500;padding:.75rem 1.5rem;transition:all .3s ease}.category-btn:hover{border-color:#667eea;color:#667eea;transform:translateY(-2px)}.category-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000;box-shadow:0 4px 15px #667eea66;color:#fff}.blog-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin:0 auto;max-width:1200px}.blog-card{background:#fff;border:1px solid #e9ecef;border-radius:16px;box-shadow:0 4px 20px #00000014;cursor:pointer;padding:2rem;transition:all .3s ease}.blog-card:hover{box-shadow:0 8px 30px #00000026;transform:translateY(-5px)}.blog-card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.blog-category{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;font-size:.8rem;font-weight:600;padding:.25rem .75rem;text-transform:uppercase}.blog-date{color:#7f8c8d;font-size:.9rem}.blog-title{color:#2c3e50;font-size:1.4rem;font-weight:600;line-height:1.3;margin-bottom:1rem}.blog-excerpt{color:#7f8c8d;line-height:1.6;margin-bottom:1.5rem}.blog-keywords{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.keyword-tag{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;color:#495057;font-size:.8rem;padding:.25rem .5rem}.blog-card-footer{align-items:center;display:flex;justify-content:space-between}.read-time{color:#7f8c8d;font-size:.9rem}.read-more-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:500;padding:.5rem 1rem;transition:all .3s ease}.read-more-btn:hover{box-shadow:0 4px 15px #667eea66;transform:translateY(-2px)}.no-posts{color:#7f8c8d;padding:4rem 2rem;text-align:center}.no-posts h3{color:#2c3e50;margin-bottom:1rem}.blog-post{background:#fff;border:1px solid #e9ecef;border-radius:16px;box-shadow:0 4px 20px #00000014;margin:0 auto;max-width:800px;padding:3rem}.blog-post-header{margin-bottom:3rem;text-align:center}.blog-post-meta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:1rem}.blog-post-meta span{color:#7f8c8d;font-size:.9rem}.blog-post h1{color:#2c3e50;font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1.5rem}.blog-content{color:#495057;font-size:1.1rem;line-height:1.8}.blog-content h1,.blog-content h2,.blog-content h3{color:#2c3e50;margin-bottom:1rem;margin-top:2rem}.blog-content h1{border-bottom:2px solid #667eea;font-size:2rem;padding-bottom:.5rem}.blog-content h2{font-size:1.5rem}.blog-content h3{font-size:1.2rem}.blog-content code{background:#f8f9fa;border-radius:4px;color:#e74c3c;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9rem;padding:.2rem .4rem}.blog-content pre{background:#2c3e50;border-radius:8px;color:#ecf0f1;margin:1.5rem 0;overflow-x:auto;padding:1.5rem}.blog-content pre code{background:none;color:inherit;padding:0}.blog-content ol,.blog-content ul{margin:1rem 0;padding-left:2rem}.blog-content li{margin-bottom:.5rem}.blog-post-footer{border-top:2px solid #e9ecef;margin-top:3rem;padding-top:2rem}.blog-actions{display:flex;gap:1rem;justify-content:space-between}.footer{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;margin-top:4rem}.footer-content{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:0 auto;max-width:1200px;padding:3rem 2rem 2rem}.footer-section h3,.footer-section h4{color:#fff;margin-bottom:1rem}.footer-section h3{font-size:1.5rem;font-weight:700}.footer-section h4{font-size:1.2rem;font-weight:600}.footer-section p{color:#fffc;line-height:1.6}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin-bottom:.5rem}.footer-section ul li a,.footer-section ul li button{background:none;border:none;color:#fffc;cursor:pointer;text-decoration:none;transition:color .3s ease}.footer-section ul li a:hover,.footer-section ul li button:hover{color:#fff}.support-links{display:flex;flex-direction:column;gap:1rem}.coffee-link{background:linear-gradient(135deg,#ff6b9d,#ff4757);border-radius:8px;color:#fff!important;font-weight:600;padding:.75rem 1.5rem;text-align:center;text-decoration:none;transition:all .3s ease}.coffee-link:hover{box-shadow:0 4px 15px #ff6b9d66;transform:translateY(-2px)}.qr-code{text-align:center}.qr-code img{border:2px solid #fff3;border-radius:8px}.footer-bottom{border-top:1px solid #fff3;padding:2rem;text-align:center}.social-links{margin-bottom:1rem}.social-links a{color:#fffc;margin:0 1rem;transition:all .3s ease}.social-links a:hover{color:#fff;transform:translateY(-2px)}@media (max-width:768px){.nav-brand{margin-bottom:1rem;text-align:center}.navigation{flex-direction:column;padding:1rem}.nav-links{flex-wrap:wrap;justify-content:center}.feedback-popup{left:1rem!important;max-width:300px;right:1rem!important;top:1rem!important}.feedback-actions{flex-direction:column}.blog-header h1{font-size:2rem}.blog-categories{align-items:center;flex-direction:column}.blog-grid{gap:1.5rem;grid-template-columns:1fr}.blog-card{padding:1.5rem}.blog-post{padding:2rem 1.5rem}.blog-post h1{font-size:2rem}.blog-actions{flex-direction:column}.footer-content{grid-template-columns:1fr;padding:2rem 1rem}.social-links a{margin:0 .5rem}}@media (max-width:480px){.blog-container{padding:1rem}.blog-header h1{font-size:1.8rem}.blog-post{padding:1.5rem 1rem}.blog-post h1{font-size:1.8rem}.blog-content{font-size:1rem}.feedback-popup-content{padding:1rem}.feedback-header{gap:.75rem}.feedback-header h3{font-size:1rem}.feedback-header p{font-size:.8rem}}.blog-stats{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1rem}.stat-badge{border-radius:20px;box-shadow:0 2px 10px #667eea4d;color:#fff;font-size:.9rem;font-weight:600;padding:.5rem 1rem}.blog-header h1,.stat-badge{background:linear-gradient(135deg,#667eea,#764ba2)}.blog-header h1{-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem}@media (max-width:768px){.blog-stats{align-items:center;flex-direction:column}.stat-badge{font-size:.8rem;padding:.4rem .8rem}}.footer-feedback-form{display:flex;flex-direction:column;gap:.75rem;max-width:300px}.footer-feedback-input{background:#ffffff1a;border:2px solid #fff3;border-radius:8px;color:#fff;font-size:.9rem;min-height:80px;padding:.75rem;resize:vertical;transition:all .3s ease;width:100%}.footer-feedback-input::placeholder{color:#ffffffb3}.footer-feedback-input:focus{background:#ffffff26;border-color:#ffffff80;outline:none}.footer-feedback-btn{align-self:flex-start;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.footer-feedback-btn:hover{box-shadow:0 4px 15px #667eea66;transform:translateY(-2px)}.footer-feedback-btn:active{transform:translateY(0)}@media (max-width:768px){.footer-feedback-form{max-width:100%}.footer-feedback-btn{align-self:stretch;text-align:center}}
/*# sourceMappingURL=main.18ff8bac.css.map*/