:root{--primary-color: #1976d2;--primary-light-color: #bbdefb;--primary-hover-color: #1565c0;--success-color: #4caf50;--danger-color: #f44336;--warning-color: #ff9800;--border-radius: 4px;--box-shadow-1: 0 1px 2px rgba(0, 0, 0, .1);--box-shadow-2: 0 2px 4px rgba(0, 0, 0, .1);--box-shadow-3: 0 4px 8px rgba(0, 0, 0, .1);--header-height: 64px;--sidebar-width: 280px;--border-color: #e0e0e0;--background-color: #f5f5f5;--sidebar-background: #fff;--content-background: #fff;--text-color: #212121;--text-muted-color: #757575;--input-background: #fff;--font-family: "Roboto", "Helvetica", "Arial", sans-serif}:root[data-theme=dark]{--primary-color: #2196f3;--primary-hover-color: #1976d2;--primary-light-color: #121212;--border-color: #424242;--background-color: #121212;--sidebar-background: #1e1e1e;--content-background: #1e1e1e;--text-color: #e0e0e0;--text-muted-color: #9e9e9e;--input-background: #2c2c2c;--success-color: #66bb6a;--danger-color: #ef5350;--warning-color: #ffa726}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color);transition:background-color .2s,color .2s}#root{display:flex;height:100vh}.app-container{display:flex;width:100%}.sidebar{width:var(--sidebar-width);background:var(--sidebar-background);border-right:1px solid var(--border-color);transition:margin-left .3s ease,background-color .2s,border-color .2s;flex-shrink:0;display:flex;flex-direction:column;position:fixed;height:100vh;z-index:1000;margin-left:calc(-1 * var(--sidebar-width))}.sidebar.collapsed{margin-left:calc(-1 * var(--sidebar-width))}.sidebar-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.sidebar-header h2{margin:0;font-size:1.25rem;font-weight:500}.sidebar-header a{color:var(--text-color);text-decoration:none;flex-grow:1}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;display:none}@media (max-width: 768px){.sidebar-overlay{display:none}.sidebar-overlay.open{display:block}}@media (min-width: 769px){.sidebar{margin-left:0}}.search-container{position:relative;padding:.75rem 1rem;border-bottom:1px solid var(--border-color)}.search-container{position:relative;padding:1rem 1.5rem}.search-box{width:100%;padding:.5rem 2.5rem .5rem 1rem;border:1px solid var(--border-color);border-radius:20px;background-color:var(--input-background);color:var(--text-color);font-size:.9rem;transition:all .2s ease}.search-box:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary-color) 25%,transparent);background-color:var(--content-background)}.clear-search{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1rem;cursor:pointer;color:var(--text-muted-color);padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.clear-search:hover{background-color:var(--border-color);color:var(--text-color)}.sidebar nav{flex-grow:1;padding:1rem 0;overflow-y:auto}.nav-category{padding:.5rem 1.5rem;font-size:.8rem;font-weight:700;color:var(--text-muted-color);text-transform:uppercase;letter-spacing:.5px}.nav-link{display:block;color:var(--text-color);text-decoration:none;padding:.75rem 1.5rem .75rem 2.5rem;transition:background-color .2s ease,color .2s ease}.nav-link:hover{background-color:var(--background-color)}.nav-link.active{background-color:var(--primary-color);color:#fff;font-weight:500}.main-content{flex-grow:1;display:flex;flex-direction:column;overflow:auto;margin-left:var(--sidebar-width);transition:margin-left .3s ease}.main-content.sidebar-collapsed{margin-left:0}@media (max-width: 768px){.main-content{margin-left:0}.main-content.sidebar-open{margin-left:var(--sidebar-width)}}.header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 1rem;background:var(--content-background);border-bottom:1px solid var(--border-color);flex-shrink:0;transition:background-color .2s,border-color .2s}.header-left{display:flex;align-items:center;gap:1rem}.toggle-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-color);display:flex;align-items:center;justify-content:center;padding:.75rem;border-radius:50%;transition:background-color .2s}.toggle-btn:hover{background-color:#0000000a}:root[data-theme=dark] .toggle-btn:hover{background-color:#ffffff0a}.header-left h2{margin:0;font-size:1.5rem;line-height:1;font-weight:500}.header-right{display:flex;align-items:center;gap:.5rem}.theme-toggle-btn{background:none;border:none;cursor:pointer;color:var(--text-color);font-size:1.25rem;display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:50%;transition:background-color .2s;width:40px;height:40px}.theme-toggle-btn:hover{background-color:#0000000a}:root[data-theme=dark] .theme-toggle-btn:hover{background-color:#ffffff0a}.language-selector{position:relative}.language-selector select{padding:.5rem 2rem .5rem 1rem;border:none;border-radius:var(--border-radius);background-color:#0000000a;color:var(--text-color);font-size:.875rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:background-color .2s;height:40px}.language-selector select:hover{background-color:#00000014}.language-selector select:focus{outline:none;background-color:#1976d214;border:none}:root[data-theme=dark] .language-selector select{background-color:#ffffff0d}:root[data-theme=dark] .language-selector select:hover{background-color:#ffffff14}:root[data-theme=dark] .language-selector select:focus{background-color:#2196f31a}.content-area{padding:2rem;flex-grow:1}.tool-container{min-height:calc(100vh - 120px);display:flex;flex-direction:column;padding:2rem;gap:1.5rem;max-width:900px;margin:0 auto}.tool-container.full-width{max-width:100%}.tool-container h1{font-size:2.5rem;margin-bottom:.5rem}.tool-container .description{font-size:1.1rem;color:var(--text-muted-color);margin-bottom:2rem}.io-container{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width: 768px){.io-container{grid-template-columns:1fr 1fr}}.io-box{display:flex;flex-direction:column;margin-bottom:1.5rem}.io-box label{margin-bottom:.5rem;font-weight:500;display:flex;justify-content:space-between;align-items:center;color:var(--text-muted-color);font-size:.9rem;transition:all .2s ease;white-space:nowrap}.io-box label:has(.copy-btn){min-height:24px}.controls{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.btn{padding:.6rem 1.2rem;font-size:.875rem;font-weight:500;border-radius:var(--border-radius);border:none;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.02857em;min-width:64px;box-shadow:var(--box-shadow-1);position:relative;overflow:hidden}.btn:hover{box-shadow:var(--box-shadow-2);transform:translateY(-1px)}.btn:active{box-shadow:var(--box-shadow-3);transform:translateY(0)}.btn:focus{outline:none}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:var(--primary-hover-color)}.btn-secondary{background-color:#e0e0e0;color:#000000de}.btn-secondary:hover{background-color:#d5d5d5}:root[data-theme=dark] .btn-secondary{background-color:#424242;color:#fff}:root[data-theme=dark] .btn-secondary:hover{background-color:#4f4f4f}.copy-btn{background:none;border:none;cursor:pointer;color:var(--text-muted-color);padding:.5rem;border-radius:50%;transition:all .2s ease;width:36px;height:36px;display:flex;align-items:center;justify-content:center}.copy-btn:hover{color:var(--primary-color);background-color:#0000000a}:root[data-theme=dark] .copy-btn:hover{background-color:#ffffff0a}.form-group{display:flex;flex-direction:column;position:relative;margin-bottom:1rem}.form-group label{margin-bottom:.5rem;font-size:.75rem;font-weight:500;color:var(--text-muted-color);transition:all .2s ease}.form-group input,.form-group select,.form-group textarea,.io-input,textarea.io-textarea{padding:1rem;border:none;border-bottom:1px solid var(--border-color);border-radius:var(--border-radius) var(--border-radius) 0 0;font-size:1rem;background-color:var(--input-background);color:var(--text-color);transition:border-color .2s,box-shadow .2s,background-color .2s;box-shadow:0 1px 2px #0000001a inset;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.io-input:focus,textarea.io-textarea:focus{outline:none;border-bottom:2px solid var(--primary-color);box-shadow:0 2px 4px #0000001a}.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-bottom:1px solid color-mix(in srgb,var(--primary-color) 50%,var(--border-color))}.form-group input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background-color:var(--input-background);transition:all .2s ease;margin-right:8px;flex-shrink:0}.form-group.checkbox-group,.form-group input[type=checkbox]+label{display:flex;flex-direction:row;align-items:center;gap:.5rem;margin-bottom:0}.form-group input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border-color);border-radius:4px;position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background-color:var(--input-background);transition:all .2s ease;flex-shrink:0}.form-group input[type=checkbox]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.form-group input[type=checkbox]:checked:after{content:"";display:block;width:6px;height:12px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.form-group input[type=checkbox]:focus{outline:none;box-shadow:0 0 0 2px var(--primary-light-color)}.form-group input[type=checkbox]:hover{border-color:var(--primary-color)}.form-group.checkbox-group label,.form-group input[type=checkbox]+label{margin-bottom:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center}.file-input{display:none}.file-label{display:block;padding:1rem;border:2px dashed var(--border-color);border-radius:var(--border-radius);text-align:center;cursor:pointer;transition:all .2s ease;background-color:var(--input-background);color:var(--text-color);font-weight:500}.file-label:hover{border-color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 5%,var(--input-background))}.file-label.dragging{border-color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,var(--input-background));transform:scale(1.02)}.form-group.floating-label{margin-top:1rem}.form-group.floating-label label{position:absolute;top:1rem;left:1rem;font-size:1rem;pointer-events:none;color:var(--text-muted-color)}.form-group.floating-label input:focus+label,.form-group.floating-label input:not(:placeholder-shown)+label,.form-group.floating-label textarea:focus+label,.form-group.floating-label textarea:not(:placeholder-shown)+label{top:.25rem;left:.75rem;font-size:.75rem;color:var(--primary-color)}.form-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1rem;padding-right:2.5rem}.form-group select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231976d2' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E")}textarea.io-textarea{width:100%;min-height:150px;padding:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--input-background);color:var(--text-color);font-family:Menlo,Consolas,monospace;font-size:.875rem;resize:vertical;transition:all .2s ease;box-shadow:none}textarea.io-textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-light-color)}textarea.io-textarea:hover{border-color:color-mix(in srgb,var(--primary-color) 50%,var(--border-color))}.io-input{padding:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:1rem;background-color:var(--input-background);color:var(--text-color);transition:all .2s ease;box-shadow:none;width:100%}.io-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-light-color)}.io-input:hover{border-color:color-mix(in srgb,var(--primary-color) 50%,var(--border-color))}.converter-ui{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.converter-ui .equals{font-size:1.5rem;font-weight:700}.home-page{text-align:center}.home-page h1{font-size:3rem}.home-page .description{font-size:1.25rem}.validation-status{font-weight:700;padding:.25rem .5rem;border-radius:4px}.validation-status.success{color:#155724;background-color:#d4edda}:root[data-theme=dark] .validation-status.success{color:#c3e6cb;background-color:#28a74520}.validation-status.error{color:#721c24;background-color:#f8d7da}:root[data-theme=dark] .validation-status.error{color:#f5c6cb;background-color:#dc354520}.error-message,.warning-message{margin-top:1rem;padding:.75rem 1rem;border-radius:4px;white-space:pre-wrap;word-break:break-word}.error-message{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24;font-family:Menlo,Consolas,monospace}:root[data-theme=dark] .error-message{background-color:#dc354520;border-color:#dc354580;color:#f5c6cb}.warning-message{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}:root[data-theme=dark] .warning-message{background-color:#ffc10720;border-color:#ffc10780;color:#ffeeba}.jwt-token-display{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;font-family:Menlo,Consolas,monospace;font-size:.8rem;word-break:break-all}.jwt-token-part{flex:1;min-width:150px;padding:.75rem;background-color:var(--input-background);border:1px solid var(--border-color);border-radius:var(--border-radius);text-align:center}.jwt-token-part.header{background-color:#e3f2fd}[data-theme=dark] .jwt-token-part.header{background-color:#0c4a6e}.jwt-token-part.payload{background-color:#f1f8e9}[data-theme=dark] .jwt-token-part.payload{background-color:#365314}.jwt-token-part.signature{background-color:#fce4ec}[data-theme=dark] .jwt-token-part.signature{background-color:#881337}.jwt-decoded-section{margin-bottom:1.5rem}.jwt-decoded-section label{display:block;margin-bottom:.5rem;font-weight:500}.jwt-decoded-section pre{background-color:var(--input-background);padding:1rem;border-radius:var(--border-radius);overflow-x:auto;white-space:pre-wrap;word-break:break-all;font-family:Menlo,Consolas,monospace;font-size:.875rem;margin:0}.color-converter-layout{display:grid;grid-template-columns:150px 1fr;gap:2rem;align-items:center}.color-picker-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.color-swatch{width:120px;height:120px;border-radius:8px;border:1px solid var(--border-color)}.color-picker-input{width:120px;height:40px;border:none;padding:0;cursor:pointer;background:none}.color-values{display:flex;flex-direction:column;gap:1rem}.color-input-group{display:flex;flex-direction:column}.color-input-group label{font-weight:500;margin-bottom:.25rem;display:flex;justify-content:space-between}.color-input-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:.5rem}.color-input-fields input[type=text],.color-input-fields input[type=number]{width:100%}.timestamp-converter{display:flex;flex-direction:column;gap:1.5rem}.timestamp-group{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.timestamp-group>input{flex-grow:1}.lorem-options{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.lorem-options .form-group{flex:1;min-width:120px;margin-bottom:0}.lorem-options .form-group input,.lorem-options .form-group select{margin-bottom:0}.diff-output{background:var(--input-background);border:1px solid var(--border-color);border-radius:4px;padding:1rem;font-family:Menlo,Consolas,monospace;font-size:.9rem;white-space:pre-wrap;word-break:break-word;max-height:500px;overflow-y:auto}.diff-output ins{background-color:#d4edda;text-decoration:none}.diff-output del{background-color:#f8d7da;text-decoration:none}:root[data-theme=dark] .diff-output ins{background-color:#28a74540}:root[data-theme=dark] .diff-output del{background-color:#dc354540}.password-options{display:flex;flex-direction:column;gap:1rem;max-width:400px;margin-bottom:1.5rem}.password-options .form-group{flex-direction:row;align-items:center;gap:1rem}.password-options input[type=range]{flex-grow:1}.qr-code-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem;flex:1}.qr-code-canvas{border:1px solid var(--border-color);border-radius:4px}.csv-options{display:flex;gap:1rem;align-items:center;margin-bottom:1.5rem}.hashing-options{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;align-items:flex-end}.hashing-options .form-group{flex-grow:1}.ip-info-container{background:var(--input-background);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;max-width:600px;margin:0 auto}.ip-info-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border-color)}.ip-info-item:last-child{border-bottom:none}.ip-info-item .key{font-weight:600;color:var(--text-muted-color)}.ip-info-item .value{font-weight:500;font-family:Menlo,Consolas,monospace;display:flex;align-items:center;gap:.5rem}.image-tool-layout{display:flex;flex-direction:column;gap:2rem;flex:1}.file-drop-zone{min-height:200px;border:2px dashed var(--border-color);border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s}.file-drop-zone.active{border-color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 10%,transparent)}.image-preview{max-width:100%;max-height:300px;border-radius:4px;margin-top:1rem}.color-palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem}.color-palette-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.color-palette-swatch{width:100%;height:80px;border-radius:4px;border:1px solid var(--border-color)}.color-palette-info{font-family:Menlo,Consolas,monospace;font-size:.9rem;display:flex;align-items:center;gap:.5rem;width:100%;justify-content:center}.markdown-preview-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;flex:1}.markdown-preview-pane{padding:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--input-background);overflow-y:auto}.color-converter-layout{display:grid;grid-template-columns:200px 1fr;gap:2rem;align-items:start;flex:1}.color-swatch{width:100%;height:150px;border-radius:var(--border-radius);border:1px solid var(--border-color);margin-bottom:1rem}.color-picker-input{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--input-background);color:var(--text-color)}.color-values{display:flex;flex-direction:column;gap:1.5rem}.color-input-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-muted-color)}.color-input-group input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--input-background);color:var(--text-color)}.color-input-fields{display:flex;gap:.5rem}.color-input-fields input{flex:1}.regex-tester-options{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:flex-end}.regex-tester-options .form-group:first-child{flex-grow:1}.regex-highlighted-text{background:var(--input-background);border:1px solid var(--border-color);padding:.75rem;border-radius:4px;white-space:pre-wrap;word-break:break-word;font-family:Menlo,Consolas,monospace}.regex-highlighted-text mark{background-color:color-mix(in srgb,var(--primary-color) 40%,transparent);border-radius:3px}.regex-matches-list{list-style-type:none;padding:0}.regex-matches-list li{background:var(--background-color);padding:.75rem;border:1px solid var(--border-color);border-radius:4px;margin-bottom:.5rem;font-family:Menlo,Consolas,monospace}.number-base-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.number-base-grid .form-group label{color:var(--text-muted-color)}.image-resizer-options{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;margin:1rem 0}.image-resizer-preview{margin-top:1rem;max-width:100%}.line-tools-options{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;align-items:center}.info-grid{display:grid;grid-template-columns:200px 1fr;gap:.5rem 1rem;background:var(--input-background);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;max-width:800px}.info-grid .key{font-weight:600;color:var(--text-muted-color);text-align:right}.info-grid .value{font-family:Menlo,Consolas,monospace;word-break:break-word}.css-unit-converter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.svg-placeholder-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}.svg-placeholder-preview{border:1px solid var(--border-color);background-color:var(--background-color);padding:1rem;border-radius:4px;margin-bottom:1.5rem}.svg-placeholder-preview h3{margin-top:0;text-align:center}.svg-placeholder-preview img{max-width:100%;display:block;margin:0 auto}.code-formatter-options{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:flex-end}.aspect-ratio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;align-items:center}.aspect-ratio-grid .separator{text-align:center;font-size:1.5rem;font-weight:700}.gradient-generator-layout{display:grid;grid-template-columns:1fr 300px;gap:2rem}.gradient-controls{display:flex;flex-direction:column;gap:1.5rem}.gradient-color-stops{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.gradient-color-stop-item{display:flex;align-items:center;gap:.5rem}.gradient-color-stop-item input[type=color]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.gradient-color-stop-item input[type=range]{flex:1}.gradient-color-stop-item span{width:40px;text-align:center}.gradient-color-stop-item button{width:32px;height:32px;border-radius:50%;border:none;background-color:#f5f5f5;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;color:#666;transition:all .2s ease}.gradient-color-stop-item button:hover{background-color:#e0e0e0}:root[data-theme=dark] .gradient-color-stop-item button{background-color:#424242;color:#fff}:root[data-theme=dark] .gradient-color-stop-item button:hover{background-color:#4f4f4f}.gradient-preview{border-radius:8px;border:1px solid var(--border-color);min-height:200px;display:flex;align-items:center;justify-content:center}.form-group input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background-color:var(--input-background);transition:all .2s ease;margin-right:8px}.form-group input[type=radio]:checked{border-color:var(--primary-color)}.form-group input[type=radio]:checked:after{content:"";display:block;width:10px;height:10px;border-radius:50%;background-color:var(--primary-color)}.form-group input[type=radio]:focus{outline:none;box-shadow:0 0 0 2px var(--primary-light-color)}.form-group input[type=radio]:hover{border-color:var(--primary-color)}.form-group input[type=radio]+label{cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:0;display:inline-flex;align-items:center}@media (max-width: 768px){.sidebar.open{margin-left:0}.content-area{padding:1.5rem}.tool-container h1{font-size:2rem}.color-converter-layout{grid-template-columns:1fr}.markdown-preview-container{grid-template-columns:1fr;height:auto}.info-grid{grid-template-columns:120px 1fr}.shadow-generator-layout,.gradient-generator-layout{grid-template-columns:1fr}.main-content{margin-left:0}}.footer{padding:1rem;border-top:1px solid var(--border-color);background:var(--content-background);font-size:.875rem;color:var(--text-muted-color);flex-shrink:0;transition:background-color .2s,border-color .2s,color .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.footer a{color:var(--primary-color);text-decoration:none}.footer a:hover{text-decoration:underline}@media (max-width: 768px){.footer{font-size:.75rem;padding:.75rem}}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.tool-card{border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem;background-color:var(--content-background);box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;transition:all .3s cubic-bezier(.25,.8,.25,1);text-decoration:none;color:var(--text-color);display:block}.tool-card:hover{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;transform:translateY(-2px);border-color:var(--primary-color)}.tool-card:active{box-shadow:0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f;transform:translateY(-1px)}.tool-card h3{margin:0 0 .5rem;font-size:1.1rem;font-weight:500}.tool-card p{margin:0;font-size:.875rem;color:var(--text-muted-color)}@media (max-width: 768px){.tools-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.tool-card{padding:1rem}}.no-results{padding:1rem;text-align:center}.no-results-message{color:var(--text-muted-color);font-style:italic;padding:2rem 1rem}.not-found-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:2rem}.not-found-content{max-width:600px}.not-found-container h1{font-size:8rem;margin:0;color:var(--primary-color);line-height:1;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.not-found-container h2{font-size:2rem;margin:.5rem 0 1.5rem;font-weight:500}.not-found-container p{font-size:1.1rem;margin-bottom:2rem;color:var(--text-muted-color)}.back-home-button{display:inline-block;background-color:var(--primary-color);color:#fff;padding:.75rem 1.5rem;border-radius:var(--border-radius);text-decoration:none;font-weight:500;transition:background-color .2s,transform .2s;box-shadow:var(--box-shadow-1)}.back-home-button:hover{background-color:var(--primary-hover-color);transform:translateY(-2px);box-shadow:var(--box-shadow-2)}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center;padding:2rem}.error-content{max-width:800px;background-color:var(--content-background);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--box-shadow-2)}.error-icon{font-size:4rem;margin-bottom:1rem}.error-container h1{font-size:2.5rem;margin:0 0 1rem;color:var(--danger-color)}.error-container p{font-size:1.2rem;margin-bottom:2rem;color:var(--text-muted-color)}.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:2rem}.error-action-button{padding:.75rem 1.5rem;border-radius:var(--border-radius);font-weight:500;cursor:pointer;transition:all .2s;border:none}.error-action-button.primary{background-color:var(--primary-color);color:#fff}.error-action-button.primary:hover{background-color:var(--primary-hover-color);transform:translateY(-2px)}.error-action-button.secondary{background-color:var(--success-color);color:#fff}.error-action-button.secondary:hover{background-color:#3d8b40;transform:translateY(-2px)}.error-action-button.tertiary{background-color:transparent;color:var(--text-color);border:1px solid var(--border-color)}.error-action-button.tertiary:hover{background-color:var(--background-color);transform:translateY(-2px)}.error-details{text-align:left;background-color:var(--background-color);padding:1.5rem;border-radius:var(--border-radius);margin-top:1rem;overflow:auto}.error-details h3{margin-top:0;color:var(--danger-color)}.error-message{font-family:monospace;white-space:pre-wrap;margin-bottom:1.5rem;padding:1rem;background-color:#f443361a;border-radius:var(--border-radius);color:var(--danger-color)}.error-stack{margin-top:1rem}.error-stack h4{margin-bottom:.5rem}.error-stack pre{background-color:var(--input-background);padding:1rem;border-radius:var(--border-radius);overflow-x:auto;font-size:.9rem;color:var(--text-muted-color)}.error-trigger-container{max-width:600px;margin:2rem auto;padding:2rem;background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow-1);text-align:center}.error-trigger-container h2{margin-top:0;color:var(--danger-color)}.error-trigger-container p{margin-bottom:2rem;color:var(--text-muted-color)}