:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.json-formatter{width:100%;height:100%;display:flex;flex-direction:column;background-color:transparent;color:var(--text-color);transition:background-color .3s ease,color .3s ease;max-width:100vw;overflow:hidden;border-radius:0;box-shadow:none}.json-formatter[data-theme=light]{--bg-color: transparent;--text-color: #333333;--border-color: #e1e5e9;--toolbar-bg: transparent;--btn-bg: #ffffff;--btn-border: #dee2e6;--btn-hover: #e9ecef;--btn-primary-bg: #007bff;--btn-primary-hover: #0056b3;--btn-secondary-bg: #6c757d;--btn-secondary-hover: #545b62;--btn-danger-bg: #dc3545;--btn-danger-hover: #c82333;--error-bg: #f8d7da;--error-border: #f5c6cb;--error-text: #721c24;--panel-bg: transparent;--header-bg: transparent}.json-formatter[data-theme=dark]{--bg-color: transparent;--text-color: #d4d4d4;--border-color: #404040;--toolbar-bg: transparent;--btn-bg: #404040;--btn-border: #555555;--btn-hover: #4a4a4a;--btn-primary-bg: #0e639c;--btn-primary-hover: #1177bb;--btn-secondary-bg: #5a6268;--btn-secondary-hover: #6c757d;--btn-danger-bg: #bd2130;--btn-danger-hover: #dc3545;--error-bg: #2d1b1f;--error-border: #5a2a2a;--error-text: #f8d7da;--panel-bg: transparent;--header-bg: transparent}.toolbar{display:flex;justify-content:flex-start;align-items:center;padding:12px 16px;background-color:var(--toolbar-bg);border-bottom:none;flex-shrink:0;flex-wrap:wrap;gap:8px;min-height:60px}.toolbar-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1;min-width:0}.btn{padding:8px 16px;border:1px solid var(--btn-border);border-radius:6px;background-color:var(--btn-bg);color:var(--text-color);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:4px;white-space:nowrap;min-width:fit-content;flex-shrink:0}.btn:hover{background-color:var(--btn-hover);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background-color:var(--btn-primary-bg);color:#fff;border-color:var(--btn-primary-bg)}.btn-primary:hover{background-color:var(--btn-primary-hover);border-color:var(--btn-primary-hover)}.btn-secondary{background-color:var(--btn-secondary-bg);color:#fff;border-color:var(--btn-secondary-bg)}.btn-secondary:hover{background-color:var(--btn-secondary-hover);border-color:var(--btn-secondary-hover)}.btn-danger{background-color:var(--btn-danger-bg);color:#fff;border-color:var(--btn-danger-bg)}.btn-danger:hover{background-color:var(--btn-danger-hover);border-color:var(--btn-danger-hover)}.editor-container{flex:1;display:flex;flex-direction:column;min-height:0;background-color:var(--panel-bg);position:relative;overflow:hidden}.editor{height:100%;width:100%;min-height:300px;overflow:auto}.json-formatter.light .cm-editor{background-color:#fff;color:#333}.json-formatter.light .cm-content{background-color:#fff}.json-formatter.light .cm-gutters{background-color:#f8f9fa;border-right:1px solid #e1e5e9}.json-formatter.light .cm-lineNumbers .cm-gutterElement{color:#6c757d}.json-formatter.light .cm-activeLine{background-color:#f8f9fa}.json-formatter.light .cm-selectionBackground,.json-formatter.light .cm-focused .cm-selectionBackground{background-color:#b3d4fc}.cm-foldGutter .cm-gutterElement{text-align:center;cursor:pointer}.cm-foldGutter .cm-gutterElement:hover{background-color:var(--btn-hover)}@media (max-width: 768px){.json-formatter{height:100%}.toolbar{padding:8px 12px;flex-direction:column;align-items:stretch;gap:12px;min-height:auto}.toolbar-left{justify-content:center;width:100%}.btn{padding:10px 16px;font-size:16px;min-height:44px;flex:1;justify-content:center}.editor{min-height:200px}.cm-editor{font-size:14px}.cm-content{padding:12px}.cm-focused{outline:none}.cm-scroller{font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace}}@media (min-width: 769px) and (max-width: 1024px){.toolbar{padding:10px 14px}.btn{padding:9px 14px;font-size:15px}}@media (min-width: 1200px){.json-formatter{max-width:none;margin:0;box-shadow:none}.toolbar{padding:16px 24px}.btn{padding:10px 20px}}@media (max-width: 480px){.toolbar{padding:8px 12px}.btn{padding:6px 10px;font-size:12px}}:root[data-theme=light]{--toast-bg-success: #d4edda;--toast-bg-error: #f8d7da;--toast-bg-warning: #fff3cd;--toast-bg-info: #d1ecf1;--toast-text-success: #155724;--toast-text-error: #721c24;--toast-text-warning: #856404;--toast-text-info: #0c5460;--toast-border-success: #c3e6cb;--toast-border-error: #f5c6cb;--toast-border-warning: #ffeaa7;--toast-border-info: #bee5eb;--toast-shadow: rgba(0, 0, 0, .1)}:root[data-theme=dark]{--toast-bg-success: #1e3a2e;--toast-bg-error: #3a1e1e;--toast-bg-warning: #3a3a1e;--toast-bg-info: #1e2a3a;--toast-text-success: #4ade80;--toast-text-error: #f87171;--toast-text-warning: #fbbf24;--toast-text-info: #60a5fa;--toast-border-success: #22c55e;--toast-border-error: #ef4444;--toast-border-warning: #f59e0b;--toast-border-info: #3b82f6;--toast-shadow: rgba(0, 0, 0, .3)}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:100vw}.toast{min-width:300px;max-width:500px;padding:0;border-radius:8px;box-shadow:0 4px 12px var(--toast-shadow);transform:translate(100%);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:auto;border:1px solid;background-clip:padding-box}.toast-visible{transform:translate(0);opacity:1}.toast-success{background-color:var(--toast-bg-success);color:var(--toast-text-success);border-color:var(--toast-border-success)}.toast-error{background-color:var(--toast-bg-error);color:var(--toast-text-error);border-color:var(--toast-border-error)}.toast-warning{background-color:var(--toast-bg-warning);color:var(--toast-text-warning);border-color:var(--toast-border-warning)}.toast-info{background-color:var(--toast-bg-info);color:var(--toast-text-info);border-color:var(--toast-border-info)}.toast-content{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}.toast-message{flex:1;font-size:14px;line-height:1.4;word-break:break-word}.toast-close{background:none;border:none;color:inherit;font-size:20px;font-weight:700;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease;flex-shrink:0}.toast-close:hover{background-color:#0000001a}.toast-close:focus{outline:2px solid currentColor;outline-offset:2px}@media (max-width: 768px){.toast-container{top:10px;right:10px;left:10px;align-items:flex-end}.toast{min-width:auto;max-width:none;width:100%}}@media (prefers-reduced-motion: reduce){.toast{transition:none}}.html-formatter{width:100%;height:100%;display:flex;flex-direction:column;gap:16px;padding:24px;background-color:transparent;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.html-formatter-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.html-formatter-header h2{margin:0;font-size:24px;font-weight:600;color:var(--text-primary, #1f2937)}.html-formatter.dark .html-formatter-header h2{color:var(--text-primary-dark, #f9fafb)}.html-formatter-actions{display:flex;gap:8px;flex-wrap:wrap}.html-formatter-editor{flex:1;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;min-height:0}.html-formatter.dark .html-formatter-editor{box-shadow:0 1px 3px #0000004d,0 1px 2px #0003}.html-formatter-info{display:flex;gap:24px;font-size:14px;color:var(--text-secondary, #6b7280);padding:8px 0}.html-formatter.dark .html-formatter-info{color:var(--text-secondary-dark, #9ca3af)}.html-formatter-info span{display:flex;align-items:center;gap:4px}@media (max-width: 768px){.html-formatter{padding:16px}.html-formatter-header{flex-direction:column;align-items:stretch}.html-formatter-actions{justify-content:center}.html-formatter-info{justify-content:center;gap:16px}}.html-formatter.light{background-color:var(--bg-primary, #ffffff)}.html-formatter.dark{background-color:var(--bg-primary-dark, #111827)}.html-formatter-editor ::-webkit-scrollbar{width:8px;height:8px}.html-formatter-editor ::-webkit-scrollbar-track{background:transparent}.html-formatter-editor ::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:4px}.html-formatter.dark .html-formatter-editor ::-webkit-scrollbar-thumb{background-color:#4b556380}.html-formatter-editor ::-webkit-scrollbar-thumb:hover{background-color:#9ca3afcc}.html-formatter.dark .html-formatter-editor ::-webkit-scrollbar-thumb:hover{background-color:#4b5563cc}.sse-parser{display:flex;flex-direction:column;height:100%;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family);border-radius:8px;overflow:hidden}[data-theme=light]{--bg-color: transparent;--text-color: #333333;--border-color: #e0e0e0;--toolbar-bg: transparent;--input-bg: #ffffff;--input-border: #d0d0d0;--button-bg: #f5f5f5;--button-hover-bg: #e8e8e8;--button-text: #333333;--button-disabled-bg: #f9f9f9;--button-disabled-text: #999999;--error-bg: #fef2f2;--error-border: #fecaca;--error-text: #dc2626;--result-info-color: #666666;--help-text-color: #888888}[data-theme=dark]{--bg-color: transparent;--text-color: #e5e5e5;--border-color: #404040;--toolbar-bg: transparent;--input-bg: #2d2d2d;--input-border: #555555;--button-bg: #404040;--button-hover-bg: #4a4a4a;--button-text: #e5e5e5;--button-disabled-bg: #333333;--button-disabled-text: #666666;--error-bg: #2d1b1b;--error-border: #5c2626;--error-text: #f87171;--result-info-color: #a0a0a0;--help-text-color: #888888}.sse-parser-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:var(--toolbar-bg);border-bottom:none;flex-shrink:0;flex-wrap:wrap;gap:8px;min-height:60px}.toolbar-right{display:flex;gap:8px;align-items:center}.toolbar-button.primary:disabled{background-color:#ccc;color:#888;border-color:#ccc}.sse-parser-content{display:flex;flex-direction:column;flex:1;padding:16px;gap:20px;overflow-y:auto;min-height:0}.input-section{display:flex;flex-direction:column;gap:16px;flex-shrink:0}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{font-size:14px;font-weight:500;color:var(--text-color)}.sse-input{width:100%;min-height:120px;padding:12px;background-color:var(--input-bg);color:var(--text-color);border:1px solid var(--input-border);border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4;resize:vertical;transition:border-color .2s ease}.sse-input:focus{outline:none;border-color:#007acc;box-shadow:0 0 0 2px #007acc1a}.path-input{width:100%;padding:8px 12px;background-color:var(--input-bg);color:var(--text-color);border:1px solid var(--input-border);border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;transition:border-color .2s ease}.path-input:focus{outline:none;border-color:#007acc;box-shadow:0 0 0 2px #007acc1a}.path-help{font-size:12px;color:var(--help-text-color);line-height:1.4}.result-section{display:flex;flex-direction:column;flex:1;gap:8px;min-height:0}.result-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0}.result-header label{font-size:14px;font-weight:500;color:var(--text-color)}.result-info{font-size:12px;color:var(--result-info-color);font-weight:400}.error-message{padding:8px 12px;background-color:var(--error-bg);color:var(--error-text);border:1px solid var(--error-border);border-radius:4px;font-size:13px;line-height:1.4}.result-output{flex:1;width:100%;padding:12px;background-color:var(--input-bg);color:var(--text-color);border:1px solid var(--input-border);border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.4;resize:none;min-height:150px;overflow-y:auto}.result-output:focus{outline:none;border-color:#007acc;box-shadow:0 0 0 2px #007acc1a}@media (max-width: 768px){.sse-parser-toolbar{flex-direction:column;align-items:stretch;gap:12px}.toolbar-left,.toolbar-right{justify-content:center}.sse-parser-content{padding:12px;gap:16px}.result-header{flex-direction:column;align-items:flex-start;gap:4px}}.keyboard-listener{display:flex;flex-direction:column;height:100%;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-family);border-radius:8px}[data-theme=light]{--bg-color: transparent;--text-color: #333333;--border-color: #e0e0e0;--toolbar-bg: transparent;--input-bg: #ffffff;--input-border: #d0d0d0;--button-bg: #f5f5f5;--button-hover-bg: #e8e8e8;--button-text: #333333;--button-disabled-bg: #f9f9f9;--button-disabled-text: #999999;--active-bg: #e8f4fd;--active-border: #007acc;--success-color: #22c55e;--warning-color: #f59e0b;--card-bg: #ffffff;--card-border: #e5e7eb;--card-shadow: 0 1px 3px rgba(0, 0, 0, .1);--pulse-color: #007acc}[data-theme=dark]{--bg-color: transparent;--text-color: #e5e5e5;--border-color: #404040;--toolbar-bg: transparent;--input-bg: #2d2d2d;--input-border: #555555;--button-bg: #404040;--button-hover-bg: #4a4a4a;--button-text: #e5e5e5;--button-disabled-bg: #333333;--button-disabled-text: #666666;--active-bg: #1e3a5f;--active-border: #007acc;--success-color: #10b981;--warning-color: #f59e0b;--card-bg: #2d2d2d;--card-border: #404040;--card-shadow: 0 1px 3px rgba(0, 0, 0, .3);--pulse-color: #007acc}.keyboard-listener-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:var(--toolbar-bg);border-bottom:1px solid var(--border-color);flex-shrink:0}.toolbar-left h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color)}.toolbar-right{display:flex;gap:8px}.toolbar-button{padding:6px 12px;background-color:var(--button-bg);color:var(--button-text);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;white-space:nowrap}.toolbar-button:hover:not(:disabled){background-color:var(--button-hover-bg)}.toolbar-button:disabled{background-color:var(--button-disabled-bg);color:var(--button-disabled-text);cursor:not-allowed;opacity:.6}.toolbar-button.primary{background-color:#007acc;color:#fff;border-color:#007acc;font-weight:600}.toolbar-button.primary:hover:not(:disabled){background-color:#005a9e;border-color:#005a9e}.toolbar-button.active{background-color:var(--warning-color);color:#fff;border-color:var(--warning-color);font-weight:600}.toolbar-button.active:hover{background-color:#d97706;border-color:#d97706}.keyboard-listener-content{display:flex;flex-direction:column;flex:1;padding:16px;gap:20px;overflow-y:auto;min-height:0}.listening-prompt,.listening-active{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;background-color:var(--card-bg);border:2px dashed var(--border-color);border-radius:12px;min-height:200px}.prompt-icon{font-size:48px;margin-bottom:16px}.listening-prompt h4,.listening-active h4{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--text-color)}.listening-prompt p,.listening-active p{margin:0;font-size:14px;color:var(--button-disabled-text)}.pulse-indicator{width:48px;height:48px;background-color:var(--pulse-color);border-radius:50%;margin-bottom:16px;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}to{transform:scale(1);opacity:1}}.event-display.event-card{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;box-shadow:var(--card-shadow);overflow:visible}.event-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background-color:var(--active-bg);border-bottom:1px solid var(--border-color)}.event-header h4{margin:0;font-size:16px;font-weight:600;color:var(--text-color)}.event-type{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase}.event-type.keydown{background-color:var(--success-color);color:#fff}.event-type.keyup{background-color:var(--warning-color);color:#fff}.event-details{padding:16px}.detail-section{margin-bottom:24px}.detail-section:last-child{margin-bottom:0}.detail-section h5{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text-color);border-bottom:1px solid var(--border-color);padding-bottom:4px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:4px}.detail-item label{font-size:13px;font-weight:500;color:var(--text-color)}.key-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;font-weight:600;color:var(--success-color);background-color:var(--active-bg);padding:2px 6px;border-radius:3px}.code-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;color:var(--text-color);background-color:var(--button-bg);padding:2px 6px;border-radius:3px}.boolean-value{font-weight:600;padding:2px 6px;border-radius:3px}.boolean-value.true{color:var(--success-color);background-color:#22c55e1a}.boolean-value.false{color:var(--button-disabled-text);background-color:var(--button-disabled-bg)}.modifier-keys{display:flex;flex-wrap:wrap;gap:8px}.modifier{padding:6px 10px;border-radius:4px;font-size:12px;font-weight:600;border:1px solid var(--border-color);background-color:var(--button-bg);color:var(--button-disabled-text);transition:all .2s ease}.modifier.active{background-color:var(--success-color);color:#fff;border-color:var(--success-color)}.platform-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}.platform-item{padding:16px;background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:6px}.platform-item h6{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--text-color);display:flex;align-items:center;gap:6px}.platform-details>div{margin-bottom:6px;font-size:13px;line-height:1.4}.platform-details>div:last-child{margin-bottom:0}.platform-details strong{font-family:Monaco,Menlo,Ubuntu Mono,monospace;color:var(--success-color)}.description{font-style:italic;color:var(--button-disabled-text);font-size:12px!important}.event-history{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;box-shadow:var(--card-shadow);overflow:visible}.event-history h4{margin:0;padding:16px;font-size:16px;font-weight:600;color:var(--text-color);background-color:var(--button-bg);border-bottom:1px solid var(--border-color)}.history-list{max-height:300px;overflow-y:auto}.history-item{display:grid;grid-template-columns:80px 1fr 120px 1fr;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border-color);font-size:12px;transition:background-color .2s ease}.history-item:hover{background-color:var(--button-bg)}.history-item:last-child{border-bottom:none}.history-time{color:var(--button-disabled-text);font-family:Monaco,Menlo,Ubuntu Mono,monospace}.history-key{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-weight:600;color:var(--success-color)}.history-code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;color:var(--text-color)}.history-modifiers{display:flex;gap:4px;flex-wrap:wrap}.history-modifiers .mod{padding:2px 4px;background-color:var(--success-color);color:#fff;border-radius:2px;font-size:10px;font-weight:600}@media (max-width: 768px){.platform-comparison,.detail-grid{grid-template-columns:1fr}.history-item{grid-template-columns:1fr;gap:4px}.toolbar-right{flex-wrap:wrap}}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--bg-code: #f8f9fa;--bg-hover: #f1f3f4;--text-primary: #212529;--text-secondary: #6c757d;--text-disabled: #adb5bd;--border-color: #dee2e6;--primary-color: #0d6efd;--primary-hover: #0b5ed7;--accent-color: #0d6efd}[data-theme=dark]{--bg-primary: #1e1e1e;--bg-secondary: #2d2d2d;--bg-tertiary: #404040;--bg-code: #2d2d2d;--bg-hover: #404040;--text-primary: #e5e5e5;--text-secondary: #a0a0a0;--text-disabled: #666666;--border-color: #555555;--primary-color: #0d6efd;--primary-hover: #0b5ed7;--accent-color: #0d6efd}.clipboard-manager{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:1rem;height:100%;overflow-y:auto}.clipboard-section{background:var(--bg-secondary);border-radius:8px;padding:1.5rem;border:1px solid var(--border-color)}.clipboard-section h2{margin:0 0 1rem;color:var(--text-primary);font-size:1.25rem;font-weight:600}.paste-area{border:2px dashed var(--border-color);border-radius:8px;padding:2rem;text-align:center;background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:all .2s ease;margin-bottom:1rem;outline:none}.paste-area:hover,.paste-area:focus{border-color:var(--primary-color);background:var(--bg-hover)}.paste-area p{margin:0;font-size:.9rem}.read-button,.write-button{background:var(--primary-color);color:#fff;border:none;border-radius:6px;padding:.75rem 1.5rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin:1rem 0;width:100%;box-shadow:0 2px 4px #0000001a}.read-button:hover:not(:disabled),.write-button:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.read-button:disabled,.write-button:disabled{background:var(--text-disabled);cursor:not-allowed;transform:none}.clipboard-content{margin-top:1rem}.clipboard-content h3{margin:0 0 1rem;color:var(--text-primary);font-size:1.1rem;font-weight:600}.clipboard-item{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;margin-bottom:1rem;overflow:hidden}.item-header{background:var(--bg-tertiary);padding:.75rem 1rem;border-bottom:1px solid var(--border-color)}.item-type{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:var(--primary-color);font-weight:600}.item-content{padding:1rem}.clipboard-text pre{background:var(--bg-code);border:1px solid var(--border-color);border-radius:4px;padding:1rem;margin:0;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:var(--text-primary);max-height:300px;overflow-y:auto;overflow-x:hidden}.clipboard-html{display:flex;flex-direction:column;gap:1rem}.html-raw,.svg-raw{flex:1}.html-raw pre,.svg-raw pre{background:var(--bg-code);border:1px solid var(--border-color);border-radius:4px;padding:1rem;margin:0;white-space:pre-wrap;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:var(--text-primary);max-height:200px;overflow-y:auto;overflow-x:hidden}.html-rendered,.svg-rendered{flex:1}.clipboard-html h4,.clipboard-svg h4{margin:0 0 .5rem;color:var(--text-primary);font-size:.9rem;font-weight:600}.html-rendered>div,.svg-rendered>div{border:1px solid var(--border-color);border-radius:4px;padding:1rem;background:var(--bg-primary);min-height:50px;word-wrap:break-word;overflow-wrap:break-word;overflow-x:auto}.clipboard-image{text-align:center}.clipboard-image img{border:1px solid var(--border-color);border-radius:4px;background:var(--bg-primary)}.clipboard-other pre{background:var(--bg-code);border:1px solid var(--border-color);border-radius:4px;padding:1rem;margin:0;white-space:pre-wrap;word-break:break-word;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:var(--text-secondary);max-height:200px;overflow-y:auto}.write-options{display:flex;gap:1.5rem;margin-bottom:1rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);font-size:.9rem;cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary-color);cursor:pointer}.write-input{margin-bottom:1rem}.write-input label{display:block;margin-bottom:.5rem;color:var(--text-primary);font-size:.9rem;font-weight:500}.write-input textarea{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:.75rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:var(--text-primary);resize:vertical;min-height:120px;transition:border-color .2s ease;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.write-input textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #0d6efd40}.write-input textarea::placeholder{color:var(--text-disabled)}@media (max-width: 768px){.clipboard-manager{grid-template-columns:1fr;gap:1rem}.section{margin-bottom:1rem}.clipboard-html{flex-direction:column}.html-raw,.svg-raw,.html-rendered,.svg-rendered{flex:none}.html-raw pre,.svg-raw pre{max-height:150px}}@media (min-width: 768px){.clipboard-manager{flex-direction:row}.clipboard-section{flex:1}.clipboard-html,.clipboard-svg{flex-direction:row}.html-raw,.svg-raw,.html-rendered,.svg-rendered{flex:1}}[data-theme=dark] .paste-area{background:var(--bg-secondary);color:var(--text-secondary)}[data-theme=dark] .paste-area:hover,[data-theme=dark] .paste-area:focus{background:var(--bg-tertiary);border-color:var(--primary-color)}[data-theme=dark] .html-rendered>div,[data-theme=dark] .svg-rendered>div{background:var(--bg-secondary);color:var(--text-primary)}[data-theme=dark] .write-section textarea:focus{box-shadow:0 0 0 2px #0d6efd66}.clipboard-manager::-webkit-scrollbar,.clipboard-text pre::-webkit-scrollbar,.clipboard-other pre::-webkit-scrollbar{width:6px}.clipboard-manager::-webkit-scrollbar-track,.clipboard-text pre::-webkit-scrollbar-track,.clipboard-other pre::-webkit-scrollbar-track{background:var(--bg-secondary)}.clipboard-manager::-webkit-scrollbar-thumb,.clipboard-text pre::-webkit-scrollbar-thumb,.clipboard-other pre::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.clipboard-manager::-webkit-scrollbar-thumb:hover,.clipboard-text pre::-webkit-scrollbar-thumb:hover,.clipboard-other pre::-webkit-scrollbar-thumb:hover{background:var(--text-disabled)}.base64-tool{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:12px;overflow:hidden}.base64-tool-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e5e5;background:#fafafa;flex-shrink:0}.base64-tool-title{margin:0;font-size:18px;font-weight:600;color:#333}.base64-tool-controls{display:flex;align-items:center;gap:16px}.mode-selector{display:flex;background:#f0f0f0;border-radius:8px;padding:2px}.mode-button{padding:8px 16px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;color:#666;transition:all .2s ease}.mode-button:hover{color:#333}.mode-button.active{background:#fff;color:#007aff;box-shadow:0 1px 3px #0000001a}.base64-tool-message{padding:12px 24px;background:#e3f2fd;color:#1976d2;font-size:14px;border-bottom:1px solid #e5e5e5;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.base64-tool-content{flex:1;display:flex;flex-direction:column;padding:24px;gap:20px;overflow:hidden}.base64-tool-section{flex:1;display:flex;flex-direction:column;min-height:0}.section-title{margin:0;font-size:16px;font-weight:600;color:#333}.section-stats{display:flex;align-items:center;gap:12px;font-size:14px;color:#666}.editor-container{flex:1;border:1px solid #e5e5e5;border-radius:8px;overflow:hidden;min-height:200px}.base64-tool-actions{display:flex;justify-content:center;gap:12px;padding:16px 0;flex-shrink:0}[data-theme=dark] .base64-tool{background:#2d2d2d}[data-theme=dark] .base64-tool-header{background:#404040;border-bottom-color:#555}[data-theme=dark] .base64-tool-title{color:#fff}[data-theme=dark] .mode-selector{background:#555}[data-theme=dark] .mode-button{color:#ccc}[data-theme=dark] .mode-button:hover{color:#fff}[data-theme=dark] .mode-button.active{background:#666;color:#007aff}[data-theme=dark] .base64-tool-message{background:#1e3a5f;color:#64b5f6;border-bottom-color:#555}[data-theme=dark] .section-title{color:#fff}[data-theme=dark] .section-stats{color:#ccc}[data-theme=dark] .editor-container{border-color:#555}@media (max-width: 768px){.base64-tool-header{flex-direction:column;gap:16px;align-items:flex-start}.base64-tool-controls{width:100%;justify-content:space-between}.base64-tool-content{padding:16px;gap:16px}.section-header{flex-direction:column;align-items:flex-start;gap:8px}.base64-tool-actions{flex-wrap:wrap;gap:8px}.editor-container{min-height:150px}}.regex-tester{display:flex;flex-direction:column;height:100%;background:var(--background-color, #ffffff);color:var(--text-color, #333333);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.regex-tester-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color, #e5e7eb);background:var(--header-background, #f9fafb)}.regex-tester-title{margin:0;font-size:18px;font-weight:600;color:var(--primary-color, #1f2937)}.regex-tester-actions{display:flex;gap:8px}.regex-tester-message{padding:12px 20px;background:var(--success-background, #d1fae5);color:var(--success-color, #065f46);border-left:4px solid var(--success-border, #10b981);font-size:14px;animation:slideIn .3s ease-out}.regex-tester-content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px;overflow-y:auto}.regex-pattern-section{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-title{margin:0;font-size:16px;font-weight:600;color:var(--primary-color, #1f2937)}.section-stats{font-size:12px;color:var(--secondary-color, #6b7280)}.regex-status{display:flex;align-items:center}.status-indicator{font-size:12px;font-weight:500;padding:2px 8px;border-radius:12px}.status-indicator.valid{background:var(--success-background, #d1fae5);color:var(--success-color, #065f46)}.status-indicator.invalid{background:var(--error-background, #fee2e2);color:var(--error-color, #dc2626)}.pattern-input-container{margin-bottom:12px}.pattern-wrapper{display:flex;align-items:center;background:var(--input-background, #f9fafb);border:1px solid var(--border-color, #d1d5db);border-radius:6px;padding:8px 12px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px}.pattern-wrapper:focus-within{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 3px var(--primary-shadow, rgba(59, 130, 246, .1))}.pattern-delimiter{color:var(--secondary-color, #6b7280);font-weight:700;-webkit-user-select:none;user-select:none}.pattern-input{flex:1;border:none;background:transparent;outline:none;font-family:inherit;font-size:inherit;color:var(--text-color, #1f2937);margin:0 4px}.pattern-input::placeholder{color:var(--placeholder-color, #9ca3af)}.flags-input{width:60px;border:none;background:transparent;outline:none;font-family:inherit;font-size:inherit;color:var(--text-color, #1f2937);margin-left:4px}.flags-input::placeholder{color:var(--placeholder-color, #9ca3af)}.flags-selector{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}.flags-label{font-size:14px;font-weight:500;color:var(--secondary-color, #6b7280)}.flag-button{width:28px;height:28px;border:1px solid var(--border-color, #d1d5db);background:var(--button-background, #ffffff);color:var(--text-color, #374151);border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.flag-button:hover{background:var(--hover-background, #f3f4f6);border-color:var(--primary-color, #3b82f6)}.flag-button.active{background:var(--primary-color, #3b82f6);color:#fff;border-color:var(--primary-color, #3b82f6)}.common-patterns{display:flex;flex-direction:column;gap:8px}.patterns-label{font-size:14px;font-weight:500;color:var(--secondary-color, #6b7280)}.patterns-grid{display:flex;flex-wrap:wrap;gap:6px}.pattern-button{padding:4px 8px;border:1px solid var(--border-color, #d1d5db);background:var(--button-background, #ffffff);color:var(--text-color, #374151);border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.pattern-button:hover{background:var(--hover-background, #f3f4f6);border-color:var(--primary-color, #3b82f6);color:var(--primary-color, #3b82f6)}.test-text-section{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:16px}.editor-container{border:1px solid var(--border-color, #d1d5db);border-radius:6px;overflow:hidden;min-height:200px}.match-results-section{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:16px;flex:1}.results-container{display:flex;flex-direction:column;gap:16px}.highlighted-text h4,.match-details h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--primary-color, #1f2937)}.highlight-content{background:var(--code-background, #f8fafc);border:1px solid var(--border-color, #e2e8f0);border-radius:6px;padding:12px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:200px;overflow-y:auto}.regex-match{background:var(--highlight-background, #fef3c7);color:var(--highlight-color, #92400e);padding:1px 2px;border-radius:2px;font-weight:600}.matches-list{display:flex;flex-direction:column;gap:12px;max-height:300px;overflow-y:auto}.match-item{background:var(--item-background, #f8fafc);border:1px solid var(--border-color, #e2e8f0);border-radius:6px;padding:12px}.match-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.match-index{background:var(--primary-color, #3b82f6);color:#fff;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600}.match-position{font-size:12px;color:var(--secondary-color, #6b7280)}.match-content{margin-bottom:8px;font-size:14px}.match-content code{background:var(--code-background, #f1f5f9);color:var(--code-color, #1e293b);padding:2px 4px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px}.match-groups{font-size:14px}.group-item{background:var(--group-background, #e0f2fe);color:var(--group-color, #0277bd);padding:2px 4px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;margin-right:6px;display:inline-block;margin-bottom:4px}.no-matches{text-align:center;color:var(--secondary-color, #6b7280);font-style:italic;padding:40px 20px}@media (prefers-color-scheme: dark){.regex-tester{--background-color: #1f2937;--text-color: #f9fafb;--primary-color: #60a5fa;--secondary-color: #9ca3af;--border-color: #374151;--card-background: #111827;--header-background: #111827;--input-background: #374151;--button-background: #374151;--hover-background: #4b5563;--code-background: #374151;--code-color: #f9fafb;--item-background: #374151;--highlight-background: #451a03;--highlight-color: #fbbf24;--group-background: #1e3a8a;--group-color: #93c5fd;--success-background: #064e3b;--success-color: #6ee7b7;--success-border: #10b981;--error-background: #7f1d1d;--error-color: #fca5a5;--placeholder-color: #6b7280;--primary-shadow: rgba(96, 165, 250, .1)}}@media (max-width: 768px){.regex-tester-header{flex-direction:column;gap:12px;align-items:flex-start}.regex-tester-actions{width:100%;justify-content:flex-end}.regex-tester-content{padding:16px;gap:16px}.section-header{flex-direction:column;align-items:flex-start;gap:4px}.flags-selector{flex-wrap:wrap}.patterns-grid{gap:4px}.pattern-button{font-size:11px;padding:3px 6px}.match-header{flex-direction:column;align-items:flex-start;gap:4px}.highlight-content{font-size:12px;padding:8px}.editor-container{min-height:150px}}.cron-helper{display:flex;flex-direction:column;gap:16px;padding:24px}.cron-helper-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.cron-helper-title{margin:0;font-size:24px;font-weight:600}.cron-helper-mode{display:flex;gap:8px}.cron-helper-message{background:#fff9e6;color:#a15c00;border:1px solid #ffe089;border-radius:8px;padding:8px 12px}.cron-sections{display:grid;grid-template-columns:1fr 1fr;gap:16px}.cron-section{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;padding:12px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.section-title{margin:0;font-size:14px;font-weight:600}.section-subtitle{font-size:12px;color:#666}.preset-list{display:flex;flex-wrap:wrap;gap:8px}.field-grid{display:grid;grid-template-columns:100px 1fr;gap:8px 12px;align-items:center}.field-row-label{font-size:12px;color:#666}.output-row{display:flex;justify-content:space-between;align-items:center}.next-times{display:flex;flex-direction:column;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}[data-theme=dark] .cron-section{background:#2d2d2d}[data-theme=dark] .section-subtitle,[data-theme=dark] .field-row-label{color:#e5e5e7}@media (max-width: 768px){.cron-helper{padding:16px}.cron-helper-header{flex-direction:column;align-items:stretch}}.border-editor{padding:20px;max-width:1200px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.border-editor-header{text-align:center;margin-bottom:30px}.border-editor-header h2{margin:0 0 8px;color:#333;font-size:24px;font-weight:600}.border-editor-header p{margin:0;color:#666;font-size:14px}.border-editor-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}@media (max-width: 768px){.border-editor-content{grid-template-columns:1fr;gap:20px}}.border-editor-controls{background:#f8f9fa;border-radius:12px;padding:24px;border:1px solid #e9ecef}.toggle-row{display:flex;justify-content:flex-start;align-items:center;gap:12px}.inline-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#444}.control-group{margin-bottom:24px}.control-group:last-child{margin-bottom:0}.control-group label{display:block;margin-bottom:8px;font-weight:500;color:#333;font-size:14px}.control-group input[type=range]{width:100%;margin-bottom:8px;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px #0000001a}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#007bff;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 4px #0000001a}.number-input{width:80px;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;text-align:center}.number-input.small{width:60px;padding:6px 8px;font-size:12px}.side-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}.side-section{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:12px}.side-label{display:block;font-size:12px;color:#666;margin-bottom:8px}.control-group select{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;background:#fff;cursor:pointer}.color-input-group{display:flex;gap:8px;align-items:center}.color-picker{width:50px;height:40px;border:1px solid #ddd;border-radius:6px;cursor:pointer;padding:0;background:none}.color-text{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:Monaco,Menlo,monospace}.radius-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.uniform-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;cursor:pointer}.uniform-toggle input[type=checkbox]{margin:0}.radius-uniform{display:flex;gap:8px;align-items:center}.radius-uniform input[type=range]{flex:1;margin-bottom:0}.border-image-controls,.outline-controls{display:flex;flex-direction:column;gap:12px}.radius-individual{display:grid;grid-template-columns:1fr 1fr;gap:12px}.radius-corner{display:flex;flex-direction:column;gap:4px}.radius-corner label{font-size:12px;color:#666;margin-bottom:4px}.border-editor-preview{background:#fff;border-radius:12px;padding:24px;border:1px solid #e9ecef;height:fit-content}.preview-container{margin-bottom:24px}.preview-box{width:200px;height:120px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:500;font-size:14px;transition:all .2s ease}.css-output{border-top:1px solid #e9ecef;padding-top:20px}.css-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.css-header h3{margin:0;font-size:16px;color:#333}.copy-button{padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:background-color .2s}.copy-button:hover{background:#0056b3}.css-code{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:16px;font-family:Monaco,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;color:#333;margin:0;white-space:pre-wrap;word-break:break-all}@media (max-width: 768px){.side-controls{grid-template-columns:1fr}}.color-tool{display:flex;flex-direction:column;height:100%;background:var(--background-color, #ffffff);color:var(--text-color, #333333);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.color-tool-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color, #e5e7eb);background:var(--header-background, #f9fafb)}.color-tool-title{margin:0;font-size:18px;font-weight:600;color:var(--primary-color, #1f2937)}.color-tool-actions{display:flex;gap:8px}.color-tool-message{padding:12px 20px;background:var(--success-background, #d1fae5);color:var(--success-color, #065f46);border-left:4px solid var(--success-border, #10b981);font-size:14px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.color-tool-tabs{display:flex;background:var(--tab-background, #f8fafc);border-bottom:1px solid var(--border-color, #e5e7eb)}.tab-button{flex:1;padding:12px 16px;border:none;background:transparent;color:var(--secondary-color, #6b7280);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border-bottom:2px solid transparent}.tab-button:hover{background:var(--hover-background, #f1f5f9);color:var(--primary-color, #3b82f6)}.tab-button.active{background:var(--active-background, #ffffff);color:var(--primary-color, #3b82f6);border-bottom-color:var(--primary-color, #3b82f6)}.color-tool-content{flex:1;overflow-y:auto;padding:20px}.picker-tab{display:flex;flex-direction:column;gap:24px}.color-display{display:flex;align-items:center;gap:16px;padding:20px;background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px}.color-preview{width:80px;height:80px;border-radius:12px;border:2px solid var(--border-color, #e5e7eb);box-shadow:0 4px 6px -1px #0000001a}.color-info h3{margin:0 0 4px;font-size:16px;font-weight:600;color:var(--primary-color, #1f2937)}.color-name{margin:0;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;color:var(--secondary-color, #6b7280)}.color-inputs{display:flex;gap:16px;flex-wrap:wrap}.input-group{display:flex;flex-direction:column;gap:6px;min-width:200px}.input-group label{font-size:14px;font-weight:500;color:var(--secondary-color, #6b7280)}.color-picker{width:60px;height:40px;border:1px solid var(--border-color, #d1d5db);border-radius:6px;cursor:pointer;background:none}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.color-input{padding:8px 12px;border:1px solid var(--border-color, #d1d5db);border-radius:6px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;background:var(--input-background, #ffffff);color:var(--text-color, #1f2937);transition:border-color .2s ease}.color-input:focus{outline:none;border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 3px var(--primary-shadow, rgba(59, 130, 246, .1))}.color-formats{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:20px}.color-formats h3{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--primary-color, #1f2937)}.formats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.format-item{background:var(--item-background, #f8fafc);border:1px solid var(--border-color, #e2e8f0);border-radius:8px;padding:12px}.format-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.format-label{font-size:12px;font-weight:600;color:var(--secondary-color, #6b7280);text-transform:uppercase;letter-spacing:.5px}.format-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;color:var(--text-color, #1f2937);word-break:break-all}.preset-colors{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:20px}.preset-colors h3{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--primary-color, #1f2937)}.colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px}.preset-color{width:40px;height:40px;border:2px solid var(--border-color, #e5e7eb);border-radius:8px;cursor:pointer;transition:all .2s ease}.preset-color:hover{transform:scale(1.1);border-color:var(--primary-color, #3b82f6);box-shadow:0 4px 8px #00000026}.palette-tab{display:flex;flex-direction:column;gap:20px}.palette-header{text-align:center}.palette-header h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--primary-color, #1f2937)}.palette-header p{margin:0;color:var(--secondary-color, #6b7280);font-size:14px}.palette-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.palette-item{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:12px;transition:transform .2s ease}.palette-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.palette-color{width:100%;height:60px;border-radius:6px;cursor:pointer;margin-bottom:8px;border:1px solid var(--border-color, #e5e7eb)}.palette-info{display:flex;justify-content:space-between;align-items:center}.palette-hex{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;color:var(--secondary-color, #6b7280)}.gradient-tab{display:flex;flex-direction:column;gap:24px}.gradient-controls{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:20px}.gradient-inputs{display:flex;gap:24px;flex-wrap:wrap}.gradient-inputs .input-group{display:flex;flex-direction:row;align-items:center;gap:12px;min-width:auto}.color-value{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;color:var(--secondary-color, #6b7280)}.gradient-preview{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:20px}.gradient-bar{width:100%;height:60px;border-radius:8px;border:1px solid var(--border-color, #e5e7eb)}.gradient-colors{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:20px}.gradient-colors h3{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--primary-color, #1f2937)}.gradient-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.gradient-step{background:var(--item-background, #f8fafc);border:1px solid var(--border-color, #e2e8f0);border-radius:8px;padding:12px}.step-color{width:100%;height:40px;border-radius:6px;cursor:pointer;margin-bottom:8px;border:1px solid var(--border-color, #e5e7eb)}.step-info{display:flex;justify-content:space-between;align-items:center;gap:8px}.step-number{background:var(--primary-color, #3b82f6);color:#fff;padding:2px 6px;border-radius:10px;font-size:10px;font-weight:600;min-width:20px;text-align:center}.step-hex{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:11px;color:var(--secondary-color, #6b7280);flex:1}.css-gradient{background:var(--card-background, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:12px;padding:20px}.css-gradient h3{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--primary-color, #1f2937)}.css-code{display:flex;align-items:center;gap:12px;background:var(--code-background, #f8fafc);border:1px solid var(--border-color, #e2e8f0);border-radius:6px;padding:12px}.css-code code{flex:1;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;color:var(--code-color, #1e293b);background:none}@media (prefers-color-scheme: dark){.color-tool{--background-color: #1f2937;--text-color: #f9fafb;--primary-color: #60a5fa;--secondary-color: #9ca3af;--border-color: #374151;--card-background: #111827;--header-background: #111827;--tab-background: #111827;--active-background: #1f2937;--hover-background: #374151;--input-background: #374151;--item-background: #374151;--code-background: #374151;--code-color: #f9fafb;--success-background: #064e3b;--success-color: #6ee7b7;--success-border: #10b981;--primary-shadow: rgba(96, 165, 250, .1)}}@media (max-width: 768px){.color-tool-header{flex-direction:column;gap:12px;align-items:flex-start}.color-tool-actions{width:100%;justify-content:flex-end}.color-tool-content{padding:16px}.color-display{flex-direction:column;text-align:center}.color-inputs{flex-direction:column}.input-group{min-width:auto}.formats-grid{grid-template-columns:1fr}.colors-grid{grid-template-columns:repeat(auto-fill,minmax(35px,1fr));gap:6px}.preset-color{width:35px;height:35px}.palette-colors{grid-template-columns:1fr}.gradient-inputs{flex-direction:column;gap:16px}.gradient-inputs .input-group{flex-direction:column;align-items:flex-start}.gradient-steps{grid-template-columns:1fr}.css-code{flex-direction:column;align-items:stretch}.tab-button{font-size:12px;padding:10px 12px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border-color, #e0e0e0);border-radius:4px;cursor:pointer;font-family:inherit;font-weight:500;text-decoration:none;transition:all .2s ease;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none;position:relative;overflow:hidden}.btn:focus-visible{outline:2px solid var(--focus-color, #007acc);outline-offset:2px}.btn-small{padding:4px 8px;font-size:12px;line-height:1.4;min-height:24px}.btn-medium{padding:6px 12px;font-size:14px;line-height:1.4;min-height:32px}.btn-large{padding:8px 16px;font-size:16px;line-height:1.5;min-height:40px}.btn-default{background-color:var(--button-bg, #f5f5f5);color:var(--button-text, #333333);border-color:var(--border-color, #e0e0e0)}.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--button-hover-bg, #e8e8e8);transform:translateY(-1px)}.btn-primary{background-color:#007acc;color:#fff;border-color:#007acc}.btn-primary:hover:not(:disabled):not(.btn-disabled){background-color:#005a9e;border-color:#005a9e;transform:translateY(-1px)}.btn-secondary{background-color:#6c757d;color:#fff;border-color:#6c757d}.btn-secondary:hover:not(:disabled):not(.btn-disabled){background-color:#5a6268;border-color:#5a6268;transform:translateY(-1px)}.btn-danger{background-color:#dc3545;color:#fff;border-color:#dc3545}.btn-danger:hover:not(:disabled):not(.btn-disabled){background-color:#c82333;border-color:#c82333;transform:translateY(-1px)}.btn-warning{background-color:var(--warning-color, #f59e0b);color:#fff;border-color:var(--warning-color, #f59e0b)}.btn-warning:hover:not(:disabled):not(.btn-disabled){background-color:#d97706;border-color:#d97706;transform:translateY(-1px)}.btn-active{background-color:var(--warning-color, #f59e0b)!important;color:#fff!important;border-color:var(--warning-color, #f59e0b)!important;transform:translateY(0)!important;box-shadow:inset 0 2px 4px #0000001a}.btn-active:hover{background-color:#d97706!important;border-color:#d97706!important}.btn-disabled,.btn:disabled{background-color:var(--button-disabled-bg, #f9f9f9)!important;color:var(--button-disabled-text, #999999)!important;border-color:var(--border-color, #e0e0e0)!important;cursor:not-allowed!important;opacity:.6;transform:none!important;box-shadow:none!important}.btn-block{width:100%;display:flex}.btn-loading{pointer-events:none}.btn-loading-spinner{width:14px;height:14px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:btn-spin 1s linear infinite}@keyframes btn-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.btn-icon-left{margin-right:-2px}.btn-icon-right{margin-left:-2px}.btn-content{display:inline-flex;align-items:center}[data-theme=dark] .btn-default{--button-bg: #404040;--button-hover-bg: #4a4a4a;--button-text: #e5e5e5;--button-disabled-bg: #333333;--button-disabled-text: #666666;--border-color: #404040}[data-theme=light] .btn-default{--button-bg: #f5f5f5;--button-hover-bg: #e8e8e8;--button-text: #333333;--button-disabled-bg: #f9f9f9;--button-disabled-text: #999999;--border-color: #e0e0e0}.btn-group{display:inline-flex}.btn-group .btn{border-radius:0;margin-left:-1px}.btn-group .btn:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;margin-left:0}.btn-group .btn:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.btn-group .btn:hover{z-index:1}@media (max-width: 768px){.btn-large{padding:6px 12px;font-size:14px;min-height:36px}.btn-medium{padding:5px 10px;font-size:13px;min-height:30px}.btn-small{padding:3px 6px;font-size:11px;min-height:22px}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;width:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0003;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0000004d}@media (prefers-color-scheme: dark){::-webkit-scrollbar-thumb{background:#fff3}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}}.workspace{display:flex;height:100vh;background:#f5f5f7;gap:16px;padding:16px;box-sizing:border-box}.workspace-content{flex:1;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;overflow:hidden;display:flex;flex-direction:column}.empty-content{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}.empty-state{text-align:center;color:#666}.empty-icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-state h3{margin:0 0 8px;font-size:18px;font-weight:600;color:#333}.empty-state p{margin:0;font-size:14px;color:#999}.settings-panel{padding:24px;flex:1}.settings-section{margin-bottom:32px}.settings-section h3{margin:0 0 16px;font-size:18px;font-weight:600;color:#333}.theme-options{display:flex;gap:12px;flex-wrap:wrap}@media (min-width: 768px){.workspace{padding:16px;gap:16px;transition:padding .3s cubic-bezier(.4,0,.2,1)}.secondary-tabs-container.desktop-only{display:flex}.secondary-tabs-container.mobile-only{display:none}.workspace-content{margin-left:0}.workspace-header{padding:20px 32px}.workspace-main{padding:32px}.workspace-title{font-size:28px}}@media (max-width: 767px){.workspace{flex-direction:column;padding:0;gap:0;transition:padding .3s cubic-bezier(.4,0,.2,1)}.secondary-tabs-container.desktop-only{display:none}.secondary-tabs-container.mobile-only{display:block}.workspace-content{margin-left:0;border-radius:0;padding-bottom:80px}.workspace-header{padding:12px 16px;position:sticky;top:0;z-index:50}.workspace-title{font-size:20px}.workspace-main{padding:16px;flex:1}.action-button{width:36px;height:36px;font-size:14px}.app-placeholder{padding:40px 20px}.placeholder-icon{font-size:48px}.app-placeholder h2{font-size:24px}.app-placeholder p{font-size:14px}.theme-selector{justify-content:center}}[data-theme=dark] .workspace{background:#1a1a1a}[data-theme=dark] .workspace-content{background:#2d2d2d}[data-theme=dark] .workspace-header{border-bottom-color:#404040}[data-theme=dark] .workspace-title{color:#fff}[data-theme=dark] .action-button:hover{background:#404040}[data-theme=dark] .app-placeholder{color:#a0a0a0}[data-theme=dark] .app-placeholder h2,[data-theme=dark] .setting-group label{color:#e0e0e0}[data-theme=dark] .theme-option{background:#404040;border-color:#555;color:#e0e0e0}[data-theme=dark] .theme-option:hover{border-color:#007aff;background:#1a2332}[data-theme=dark] .theme-option.active{border-color:#007aff;background:#007aff;color:#fff}.workspace-main>*{animation:fadeIn .3s ease-out}.workspace-content,.workspace-header,.workspace-main{transition:all .3s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 767px) and (max-width: 769px){.workspace{transition:all .4s cubic-bezier(.25,.46,.45,.94)!important}}@media (prefers-reduced-motion: reduce){.workspace,.workspace-content,.workspace-header,.workspace-main,.workspace-main>*{transition:none!important;animation:none!important}}.category-dock{background:#fff;border:none;box-shadow:0 4px 20px #00000014;z-index:1000;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:16px;width:80px;flex-shrink:0}.category-dock-container{padding:12px;display:flex;flex-direction:column;height:100%}.category-items{display:flex;flex-direction:column;gap:8px}.category-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;border:none;border-radius:12px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;color:#666;font-size:12px;font-weight:500;min-height:60px;padding:8px 4px;width:100%}.category-item:hover{background:#0000000d;color:#333;transform:translateY(-1px)}.category-item.active{background:#007aff;color:#fff;box-shadow:0 4px 12px #007aff4d}.category-item.active:hover{background:#0056cc;transform:translateY(-1px)}.category-item-icon{position:relative;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:4px;width:32px;height:32px}.category-item-label{white-space:nowrap;font-weight:500;text-align:center;line-height:1.2}@media (max-width: 767px){.category-dock{position:fixed;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;border-bottom:none;width:auto;height:auto}.category-dock-container{padding:8px 16px 16px}.category-items{flex-direction:row;justify-content:space-around;gap:16px}.category-item{flex-direction:column;padding:8px 12px;min-width:60px;min-height:50px;gap:4px}.category-item-icon{margin-bottom:2px;font-size:20px;width:24px;height:24px}.category-item-label{font-size:11px;text-align:center}}[data-theme=dark] .category-dock{background:#2d2d2d}[data-theme=dark] .category-item{color:#e5e5e7}[data-theme=dark] .category-item:hover{background:#ffffff1a;color:#fff}[data-theme=dark] .category-item.active{background:#007aff;color:#fff}.tools-list{display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;overflow:hidden;height:100%;width:240px;flex-shrink:0}.tools-list.empty{justify-content:center;align-items:center}.empty-state{text-align:center;color:#999;padding:40px 20px}.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5}.empty-state p{margin:0;font-size:14px}.tools-list-header{padding:16px 20px;border-bottom:1px solid #f0f0f0;background:#fafafa;flex-shrink:0}.tools-list-title{margin:0;font-size:16px;font-weight:600;color:#333}.tools-list-content{flex:1;display:flex;flex-direction:column;padding:8px;gap:2px;overflow-y:auto}.tool-item{display:flex;align-items:center;padding:12px 16px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:#666;font-size:14px;font-weight:500;text-align:left;width:100%;gap:12px}.tool-item:hover{background:#0000000d;color:#333}.tool-item.active{background:#007aff;color:#fff;box-shadow:0 2px 8px #007aff4d}.tool-item.active:hover{background:#0056cc}.tool-item-icon{position:relative;display:flex;align-items:center;justify-content:center;font-size:18px;width:24px;height:24px;flex-shrink:0}.tool-item-badge{position:absolute;top:-6px;right:-6px;background:#ff3b30;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;line-height:1}.tool-item-content{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px}.tool-item-label{font-weight:500;line-height:1.2}.tool-item-description{font-size:12px;opacity:.7;line-height:1.2}.tool-item.active .tool-item-description{opacity:.9}@media (max-width: 767px){.tools-list{position:sticky;top:0;z-index:100;border-radius:0;box-shadow:0 2px 8px #0000001a;height:auto;flex-shrink:0;width:100%}.tools-list-header{padding:12px 16px;background:#fff}.tools-list-title{font-size:14px}.tools-list-content{flex-direction:row;padding:8px 16px;gap:6px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;width:100%;box-sizing:border-box}.tool-item{flex-shrink:0;flex-direction:column;padding:8px 10px;min-width:75px;max-width:75px;gap:3px;text-align:center;width:auto}.tool-item-icon{width:16px;height:16px;font-size:14px}.tool-item-content{align-items:center}.tool-item-label{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool-item-description{display:none}}[data-theme=dark] .tools-list{background:#2d2d2d}[data-theme=dark] .tools-list-header{background:#404040;border-bottom-color:#555}[data-theme=dark] .tools-list-title{color:#fff}[data-theme=dark] .tool-item{color:#e5e5e7}[data-theme=dark] .tool-item:hover{background:#ffffff1a;color:#fff}[data-theme=dark] .tool-item.active{background:#007aff;color:#fff}[data-theme=dark] .empty-state{color:#999}@media (max-width: 767px){[data-theme=dark] .tools-list-header{background:#2d2d2d}}