.info-list{margin:var(--space-md) 0;padding-left:var(--space-xl);list-style:none}.info-list li{position:relative;margin-bottom:var(--space-sm);padding-left:var(--space-md);line-height:1.6;color:var(--color-text-primary)}.info-list li::before{content:'•';position:absolute;left:0;top:50%;color:var(--color-accent-primary);font-size:1.2em;font-weight:700;transform:translateY(-50%)}.info-list li strong{color:var(--color-accent-primary);font-weight:600}.tool-header{background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border-primary);padding:var(--space-lg) var(--space-lg) var(--space-xl);margin-bottom:var(--space-xl)}.tool-nav{margin-bottom:var(--space-md)}.back-button{background:0 0;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-sm);transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--space-sm)}.back-button:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary);transform:translateX(-2px)}.back-button:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.tool-title-section{text-align:center}.tool-title{font-size:var(--text-3xl);font-weight:300;color:var(--color-text-primary);margin-bottom:var(--space-md);letter-spacing:-.025em}.tool-subtitle{color:var(--color-text-secondary);font-size:var(--text-lg);line-height:var(--leading-relaxed);max-width:600px;margin:0 auto}.tool-content{max-width:1920px;margin:0 auto;margin-bottom:var(--space-xl);padding:0 var(--space-lg)}.control-group{display:flex;flex-direction:column;gap:var(--space-sm)}.control-label{font-weight:500;color:var(--color-text-primary);font-size:var(--text-sm)}.format-select,.indent-select{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-bg-card);color:var(--color-text-primary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.format-select:hover,.indent-select:hover{border-color:var(--color-border-focus)}.format-select:focus,.indent-select:focus{outline:2px solid var(--color-border-focus);outline-offset:2px;border-color:var(--color-border-focus)}.action-btn{background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);color:var(--color-text-primary);cursor:pointer;font-size:var(--text-sm);transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--space-xs);white-space:nowrap}.action-btn:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus);transform:translateY(-1px)}.action-btn:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.action-btn.primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover));border-color:var(--color-primary);color:#fff;font-weight:500}.action-btn.primary:hover{background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary));transform:translateY(-1px);box-shadow:var(--shadow-md)}.action-btn.secondary{background-color:var(--color-bg-secondary);border-color:var(--color-border-secondary);color:var(--color-text-secondary)}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.quick-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);flex-wrap:wrap;gap:var(--space-sm)}.section-title{font-size:var(--text-lg);font-weight:500;color:var(--color-text-primary)}.section-actions{display:flex;align-items:center;gap:var(--space-md)}.char-count,.stats-text{font-size:var(--text-xs);color:var(--color-text-tertiary)}.copy-btn,.download-btn{background:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-xs);transition:all var(--transition-fast)}.copy-btn:hover,.download-btn:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.input-textarea,.json-input,.json-output,.json-textarea,.output-textarea,.text-input,.text-output{width:100%;min-height:200px;padding:var(--space-md);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-bg-card);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);resize:vertical;transition:all var(--transition-fast);overflow-x:auto;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;word-break:break-all}.json-output-container{position:relative;width:100%;max-width:100%;overflow:hidden}.json-output-container pre{margin:0;max-width:100%;overflow-x:auto}#jsonOutput{display:block;max-width:100%;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.validation-status{display:inline-block;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.validation-status.valid{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success)}.validation-status.invalid{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error)}.json-textarea:focus,.text-input:focus{outline:2px solid var(--color-border-focus);outline-offset:2px;border-color:var(--color-border-focus)}.text-output{background-color:var(--color-bg-secondary);color:var(--color-text-secondary)}.encoding-controls{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl);display:flex;flex-wrap:wrap;gap:var(--space-lg);align-items:center}.direction-toggle{display:flex;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);overflow:hidden}.direction-btn{background:var(--color-bg-card);border:none;padding:var(--space-sm) var(--space-md);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-sm);transition:all var(--transition-fast)}.direction-btn.active{background:var(--color-primary);color:#fff}.direction-btn:hover:not(.active){background:var(--color-bg-tertiary)}.encoding-workspace{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-lg);margin-bottom:var(--space-xl)}.input-section,.output-section{position:relative}.input-container,.output-container{position:relative}.input-overlay,.output-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.error-message,.info-message{position:absolute;bottom:var(--space-md);left:var(--space-md);right:var(--space-md);background-color:var(--color-error-bg);color:var(--color-error);padding:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs);pointer-events:auto}.info-message{background-color:var(--color-success-bg);color:var(--color-success)}.conversion-indicator{display:flex;align-items:center;justify-content:center;text-align:center}.conversion-arrow{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.conversion-label{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:500}.encoding-info{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.info-title{font-size:var(--text-md);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.format-description{color:var(--color-text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-lg)}.encoding-stats{display:flex;gap:var(--space-lg);margin-top:var(--space-lg)}.stat-item{display:flex;flex-direction:column;gap:var(--space-xs)}.stat-label{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:500}.stat-value{font-size:var(--text-sm);font-weight:500;color:var(--color-text-primary)}.stat-value.positive{color:var(--color-success)}.stat-value.negative{color:var(--color-error)}.format-examples{margin-top:var(--space-lg)}.examples-title{font-size:var(--text-md);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md)}.example-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-sm)}.example-label{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:500;margin-bottom:var(--space-xs)}.example-text{font-family:var(--font-family-mono);font-size:var(--text-xs);color:var(--color-text-primary);word-break:break-all}.json-search-bar{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.search-input-group{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}.search-input{flex:1;min-width:200px;padding:var(--space-sm) var(--space-md);background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text-primary);transition:all var(--transition-fast)}.search-input:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.search-results{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);font-size:var(--text-sm)}#searchResultsText{color:var(--color-text-secondary);font-weight:500}.search-navigation{display:flex;align-items:center;gap:var(--space-sm)}.search-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.search-nav-btn:hover{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.search-nav-btn svg{width:16px;height:16px}#searchPosition{min-width:60px;text-align:center;font-size:var(--text-xs);color:var(--color-text-tertiary)}.textarea-wrapper{position:relative}.json-highlight-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden;border-radius:var(--radius-md)}.diff-text-input::selection{background-color:rgba(147,51,234,.3);color:var(--color-text-primary)}.search-match-highlight{background-color:#ffeb3b!important;color:#000!important;padding:2px 0;border-radius:2px;box-shadow:0 0 0 2px rgba(255,235,59,.3)}.search-match-current{background-color:#ff9500!important;color:#000!important;font-weight:600;box-shadow:0 0 0 3px rgba(255,149,0,.5)}.json-input-with-highlights::selection,.json-output-with-highlights::selection{background-color:#ff9500!important;color:#000!important}.json-search-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1;padding:inherit;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre-wrap;word-wrap:break-word}.json-search-overlay .highlight-mark{background-color:#ffeb3b;color:transparent;border-radius:2px;padding:1px 2px;margin:-1px -2px}[data-theme=dark] .search-input{background-color:var(--color-bg-tertiary)}[data-theme=dark] .search-results{background-color:var(--color-bg-tertiary)}[data-theme=dark] .search-nav-btn{background-color:var(--color-bg-secondary)}[data-theme=dark] .search-nav-btn:hover{background-color:var(--color-primary)}@media (max-width:768px){.json-search-bar{padding:var(--space-md)}.search-input-group{flex-direction:column;align-items:stretch}.search-input{width:100%}.search-results{flex-direction:column;gap:var(--space-sm);align-items:flex-start}}.json-controls{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl);display:flex;flex-wrap:wrap;gap:var(--space-lg);align-items:center;justify-content:space-between}.format-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.json-workspace{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}.json-display{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);min-height:300px;font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);overflow:auto;white-space:pre-wrap}.json-syntax-highlight{position:absolute;top:0;left:0;width:100%;height:100%;padding:inherit;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre-wrap;word-wrap:break-word;overflow-y:auto;overflow-x:hidden;pointer-events:none;z-index:1;background:0 0}.json-key{color:#06c;font-weight:600}.json-string{color:#22863a}.json-number{color:#005cc5}.json-boolean{color:#d73a49;font-weight:600}.json-null{color:#6f42c1;font-weight:600;font-style:italic}.json-bracket{color:#24292e;font-weight:700}[data-theme=dark] .json-key{color:#79c0ff;font-weight:600}[data-theme=dark] .json-string{color:#a5d6ff}[data-theme=dark] .json-number{color:#79c0ff}[data-theme=dark] .json-boolean{color:#ff7b72;font-weight:600}[data-theme=dark] .json-null{color:#d2a8ff;font-weight:600}[data-theme=dark] .json-bracket{color:#c9d1d9;font-weight:700}.textarea-wrapper.has-syntax-highlighting textarea{color:transparent!important;caret-color:var(--color-text-primary);background:0 0;position:relative;z-index:2}.error-panel,.info-panel{background-color:var(--color-error-bg);border:1px solid var(--color-error);border-radius:var(--radius-md);padding:var(--space-md);margin:var(--space-md)}.info-panel{background-color:var(--color-success-bg);border-color:var(--color-success)}.error-header,.info-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);font-weight:500}.error-location{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-xs)}.json-analysis{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.analysis-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}.analysis-item{display:flex;flex-direction:column;gap:var(--space-xs)}.analysis-label{font-size:var(--text-xs);color:var(--color-text-tertiary);font-weight:500}.analysis-value{font-size:var(--text-sm);font-weight:500;color:var(--color-text-primary)}.status-valid{color:var(--color-success)}.status-invalid{color:var(--color-error)}.status-unknown{color:var(--color-text-tertiary)}.json-tree{margin-top:var(--space-lg)}.json-stats-container{padding:var(--space-lg)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-lg);margin-bottom:var(--space-2xl)}.stat-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);text-align:center;transition:all var(--transition-fast)}.stat-item:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-label{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}.stat-value{font-size:var(--text-2xl);font-weight:600;color:var(--color-primary);line-height:1.2}.stats-details{margin-bottom:var(--space-xl)}.stats-details-title{font-size:var(--text-lg);font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-md)}.type-distribution{background-color:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--space-lg)}.distribution-bar{display:flex;height:40px;border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-bg-tertiary);margin-bottom:var(--space-lg)}.distribution-segment{transition:all var(--transition-normal);position:relative;min-width:0}.distribution-segment:hover{opacity:.8}.distribution-segment.strings{background-color:#10b981}.distribution-segment.numbers{background-color:#3b82f6}.distribution-segment.booleans{background-color:#f59e0b}.distribution-segment.nulls{background-color:#6b7280}.distribution-segment.arrays{background-color:#8b5cf6}.distribution-segment.objects{background-color:#ec4899}.distribution-legend{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center}.legend-item{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm)}.legend-color{width:16px;height:16px;border-radius:var(--radius-sm)}.legend-color.strings{background-color:#10b981}.legend-color.numbers{background-color:#3b82f6}.legend-color.booleans{background-color:#f59e0b}.legend-color.nulls{background-color:#6b7280}.legend-color.arrays{background-color:#8b5cf6}.legend-color.objects{background-color:#ec4899}.legend-label{color:var(--color-text-secondary)}.path-analysis{background-color:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--space-lg)}.path-item{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.path-item:last-child{margin-bottom:0}.path-label{font-size:var(--text-sm);color:var(--color-text-secondary);min-width:140px}.path-value{font-family:var(--font-family-mono);font-size:var(--text-sm);color:var(--color-text-primary);background-color:var(--color-bg-tertiary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);word-break:break-all;flex:1}[data-theme=dark] .stat-item{background-color:var(--color-bg-tertiary)}[data-theme=dark] .type-distribution{background-color:var(--color-bg-tertiary)}[data-theme=dark] .distribution-bar{background-color:var(--color-bg-secondary)}[data-theme=dark] .path-analysis{background-color:var(--color-bg-tertiary)}[data-theme=dark] .path-value{background-color:var(--color-bg-secondary)}.distribution-segment[data-tooltip]{position:relative}.distribution-segment[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background-color:var(--color-bg-primary);color:var(--color-text-primary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-md);white-space:nowrap;font-size:var(--text-xs);z-index:1000;pointer-events:none}@media (max-width:768px){.stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-md)}.stat-value{font-size:var(--text-xl)}.distribution-legend{gap:var(--space-sm);font-size:var(--text-xs)}.path-item{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.path-label{min-width:unset}}@media (max-width:480px){.stats-grid{grid-template-columns:repeat(2,1fr)}}.sitemap-stats{margin-bottom:var(--space-xl)}.sitemap-tools{display:grid;gap:var(--space-lg)}.sitemap-link{display:block;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);text-decoration:none;color:inherit;transition:all var(--transition-fast)}.sitemap-link:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.sitemap-link h3{font-size:var(--text-lg);font-weight:600;color:var(--color-primary);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm)}.sitemap-link p{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed);margin:0}.feature-highlights{display:grid;gap:var(--space-md);margin-top:var(--space-lg)}.highlight-item{background-color:var(--color-bg-secondary);padding:var(--space-md);border-radius:var(--radius-md);border-left:4px solid var(--color-primary)}[data-theme=dark] .sitemap-link{background-color:var(--color-bg-tertiary)}[data-theme=dark] .highlight-item{background-color:var(--color-bg-tertiary)}@media (max-width:768px){.sitemap-link{padding:var(--space-md)}.sitemap-link h3{font-size:var(--text-base)}.feature-highlights{gap:var(--space-sm)}.highlight-item{padding:var(--space-sm)}}.accent-amber-500,.accent-amber-600,.accent-orange-500,.accent-orange-600,.border-orange-500,.border-orange-600,.range-slider::-moz-range-thumb,.range-slider::-webkit-slider-thumb,.text-orange-500,.text-orange-600,input[type=checkbox]:checked,input[type=range]::-moz-range-thumb,input[type=range]::-webkit-slider-thumb{accent-color:var(--color-primary)!important;color:var(--color-primary)!important;border-color:var(--color-primary)!important;background-color:var(--color-primary)!important}.bg-amber-50,.bg-orange-50{background-color:var(--color-bg-card)!important}.text-amber-800,.text-orange-800{color:var(--color-text-primary)!important}.input-stats.notification-success,input.notification-success,select.notification-success,textarea.notification-success{border-color:var(--color-border-primary)!important;background-color:var(--color-bg-card)!important;color:var(--color-text-primary)!important;box-shadow:none!important}.format-selector .notification-success,.input-container .notification-success,.notification-success input,.notification-success select,.notification-success textarea,.operation-selector .notification-success,input.notification-success,select.notification-success,textarea.notification-success{border-color:var(--color-border-primary)!important;background-color:var(--color-bg-card)!important;color:var(--color-text-primary)!important;box-shadow:none!important}#formatSelect.notification-success,#inputText.notification-success,#operationSelect.notification-success,.input-textarea.notification-success,.option-select.notification-success{border-color:var(--color-border-primary)!important;background-color:var(--color-bg-card)!important;color:var(--color-text-primary)!important;box-shadow:none!important}.input-stats.notification-success,.input-stats.notification-success .stats-text,.input-stats.notification-success span{color:var(--color-text-secondary)!important}input.notification-success:focus,select.notification-success:focus,textarea.notification-success:focus{border-color:var(--color-border-focus)!important;outline:2px solid var(--color-border-focus)!important;outline-offset:2px!important;box-shadow:0 0 0 3px rgba(59,130,246,.1)!important}.bg-green-50,.border-green-500,.border-green-600,.text-green-500,.text-green-600,.text-green-800{color:var(--color-text-secondary)!important;border-color:var(--color-border-primary)!important;background-color:var(--color-bg-card)!important}.bg-green-50,.border-green-500,.notification-success,.text-green-500,.text-green-600,.text-green-800{--current-color:var(--color-success);--current-bg:var(--color-success-bg);color:var(--current-color)!important;border-color:var(--current-color)!important;background-color:var(--current-bg)!important}.notification-success{border-left:4px solid var(--color-success);background-color:var(--color-success-bg);color:var(--color-success);padding:var(--space-md);border-radius:var(--radius-md)}.bg-red-100,.bg-red-50,.border-red-500,.hover\:bg-red-200:hover,.notification-error,.text-red-400,.text-red-600,.text-red-700,.text-red-800{--current-color:var(--color-error);--current-bg:var(--color-error-bg);color:var(--current-color)!important;border-color:var(--current-color)!important;background-color:var(--current-bg)!important}.notification-error{border-left:4px solid var(--color-error);background-color:var(--color-error-bg);color:var(--color-error);padding:var(--space-md);border-radius:var(--radius-md)}.bg-yellow-100,.bg-yellow-50,.border-yellow-500,.notification-warning,.text-yellow-600,.text-yellow-800{--current-color:var(--color-warning);--current-bg:var(--color-warning-bg);color:var(--current-color)!important;border-color:var(--current-color)!important;background-color:var(--current-bg)!important}.notification-warning{border-left:4px solid var(--color-warning);background-color:var(--color-warning-bg);color:var(--color-warning);padding:var(--space-md);border-radius:var(--radius-md)}.bg-blue-100,.bg-blue-50,.border-blue-500,.focus\:border-blue-500:focus,.focus\:ring-blue-500:focus,.notification-info,.text-blue-500,.text-blue-600,.text-blue-800{--current-color:var(--color-primary);--current-bg:var(--color-secondary);color:var(--current-color)!important;border-color:var(--current-color)!important;background-color:var(--current-bg)!important}.notification-info{border-left:4px solid var(--color-primary);background-color:var(--color-secondary);color:var(--color-primary);padding:var(--space-md);border-radius:var(--radius-md)}.bg-purple-100,.bg-purple-50,.border-purple-200,.hover\:text-purple-600:hover,.text-purple-400,.text-purple-600,.text-purple-700,.text-purple-800{color:var(--color-primary)!important;border-color:var(--color-primary)!important;background-color:var(--color-secondary)!important}.border-green-500{border-color:var(--color-success)!important}.border-red-500{border-color:var(--color-error)!important}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--color-border-focus);outline-offset:2px;border-color:var(--color-border-focus)}.tree-title{font-size:var(--text-md);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.tree-container{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);max-height:400px;overflow:auto;font-family:var(--font-family-mono);font-size:var(--text-sm)}.tree-empty{color:var(--color-text-tertiary);text-align:center;padding:var(--space-lg);font-style:italic}.tree-item{margin:var(--space-xs) 0;line-height:var(--leading-relaxed)}.tree-key{color:var(--color-primary);font-weight:500}.tree-string{color:var(--color-success)}.tree-number{color:var(--color-primary)}.tree-boolean{color:var(--color-error);font-weight:500}.tree-null{color:var(--color-text-tertiary);font-style:italic}.tree-brace,.tree-bracket{color:var(--color-text-secondary);font-weight:500}.tree-count{color:var(--color-text-tertiary);font-size:var(--text-xs);margin-left:var(--space-sm)}.tree-children{margin-left:var(--space-lg);border-left:1px solid var(--color-border-primary);padding-left:var(--space-sm)}.format-help{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.help-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-md)}.help-item{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md)}.help-item code{background-color:var(--color-bg-tertiary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-family:var(--font-family-mono);font-size:var(--text-xs);color:var(--color-text-primary);display:block;margin-top:var(--space-sm)}.password-controls{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-xl);flex-wrap:wrap;gap:var(--space-lg)}.length-control{display:flex;align-items:center;gap:var(--space-md)}.length-slider{min-width:200px;height:6px;background:var(--color-bg-tertiary);border-radius:var(--radius-sm);appearance:none;cursor:pointer}.length-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer}.length-slider::-moz-range-thumb{width:20px;height:20px;background:var(--color-primary);border-radius:50%;border:none;cursor:pointer}.length-input{width:80px;padding:var(--space-sm);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);background-color:var(--color-bg-card);color:var(--color-text-primary);text-align:center;font-size:var(--text-sm)}.generate-actions{display:flex;gap:var(--space-sm)}.character-sets{margin-top:var(--space-lg)}.charset-title{font-size:var(--text-md);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.charset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-md)}.charset-option{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);transition:all var(--transition-fast)}.charset-option:hover{background-color:var(--color-bg-tertiary)}.checkbox-label{display:flex;flex-direction:column;gap:var(--space-sm);cursor:pointer}.checkbox-text{font-weight:500;color:var(--color-text-primary)}.charset-sample{font-family:var(--font-family-mono);font-size:var(--text-xs);color:var(--color-text-tertiary);word-break:break-all;line-height:var(--leading-normal)}.password-output{margin-bottom:var(--space-xl)}.password-display-container{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg)}.password-display{background-color:var(--color-bg-secondary);border:2px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg);margin-bottom:var(--space-lg);min-height:60px;display:flex;align-items:center;justify-content:center;position:relative}.password-text{font-family:var(--font-family-mono);font-size:var(--text-xl);font-weight:500;color:var(--color-text-primary);word-break:break-all;text-align:center;line-height:var(--leading-normal)}.password-text.masked{letter-spacing:2px;color:var(--color-text-secondary)}.password-placeholder{color:var(--color-text-tertiary);font-style:italic;font-family:var(--font-family-sans);font-size:var(--text-base)}.password-actions{display:flex;justify-content:center;gap:var(--space-md)}.strength-analysis{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.analysis-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.strength-meter{margin-bottom:var(--space-lg)}.strength-bar{width:100%;height:12px;background-color:var(--color-bg-tertiary);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--space-sm)}.strength-fill{height:100%;transition:all var(--transition-slow);border-radius:var(--radius-sm)}.strength-fill.strength-1,.strength-indicator.strength-1{color:#dc2626;background-color:#dc2626}.strength-fill.strength-2,.strength-indicator.strength-2{color:#ea580c;background-color:#ea580c}.strength-fill.strength-3,.strength-indicator.strength-3{color:#d97706;background-color:#d97706}.strength-fill.strength-4,.strength-indicator.strength-4{color:#ca8a04;background-color:#ca8a04}.strength-fill.strength-5,.strength-indicator.strength-5{color:#16a34a;background-color:#16a34a}.strength-fill.strength-6,.strength-indicator.strength-6{color:#059669;background-color:#059669}.strength-label{text-align:center;font-weight:500;color:var(--color-text-primary)}.strength-indicator{font-size:var(--text-xs);font-weight:500;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);background-color:var(--color-bg-tertiary);color:var(--color-text-tertiary)}.strength-details{margin-top:var(--space-md)}.strength-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-md)}.metric-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm);background-color:var(--color-bg-secondary);border-radius:var(--radius-sm)}.metric-label{font-size:var(--text-sm);color:var(--color-text-secondary)}.metric-value{font-size:var(--text-sm);font-weight:500;color:var(--color-text-primary)}.password-history{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);flex-wrap:wrap;gap:var(--space-md)}.history-title{font-size:var(--text-lg);font-weight:500;color:var(--color-text-primary)}.history-actions{display:flex;gap:var(--space-sm)}.password-history-list{max-height:400px;overflow-y:auto;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-bg-secondary)}.history-empty{padding:var(--space-xl);text-align:center;color:var(--color-text-tertiary);font-style:italic}.history-item{border-bottom:1px solid var(--color-border-primary);padding:var(--space-md);transition:all var(--transition-fast)}.history-item:last-child{border-bottom:none}.history-item:hover{background-color:var(--color-bg-tertiary)}.history-password{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}.history-password .password-text{font-family:var(--font-family-mono);font-size:var(--text-sm);color:var(--color-text-primary);flex-grow:1;letter-spacing:1px}.history-password .password-text.revealed{color:var(--color-primary);font-weight:500}.history-copy-btn,.history-show-btn{background:0 0;border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);padding:var(--space-xs);color:var(--color-text-tertiary);cursor:pointer;font-size:var(--text-xs);width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.history-copy-btn:hover,.history-show-btn:hover{background-color:var(--color-bg-card);color:var(--color-text-primary)}.history-details{display:flex;gap:var(--space-md);font-size:var(--text-xs);color:var(--color-text-tertiary)}.history-length,.history-timestamp{color:var(--color-text-tertiary)}.history-strength{font-weight:500;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);background-color:var(--color-bg-card)}.password-presets,.password-tips{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}.presets-title,.tips-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-md);color:var(--color-text-primary)}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-md)}.tip-item{display:flex;gap:var(--space-md);padding:var(--space-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md)}.tip-icon{font-size:var(--text-xl);flex-shrink:0}.tip-content{line-height:var(--leading-relaxed);color:var(--color-text-secondary)}.tip-content strong{color:var(--color-text-primary)}.presets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-md)}.preset-btn{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);cursor:pointer;transition:all var(--transition-fast);text-align:center}.preset-btn:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus);transform:translateY(-2px);box-shadow:var(--shadow-md)}.preset-name{font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-xs)}.preset-desc{font-size:var(--text-xs);color:var(--color-text-tertiary);line-height:var(--leading-normal)}@media (max-width:1024px){.encoding-workspace,.json-workspace{grid-template-columns:1fr}.conversion-indicator{order:-1;margin-bottom:var(--space-lg)}.conversion-arrow{flex-direction:row;padding:var(--space-sm) var(--space-md)}#conversionDirection{transform:rotate(90deg)}}@media (max-width:768px){.tool-content{padding:0 var(--space-md)}.tool-header{padding:var(--space-md);margin-bottom:var(--space-lg)}.tool-title{font-size:var(--text-2xl)}.tool-subtitle{font-size:var(--text-base)}.encoding-controls,.json-controls,.password-controls{flex-direction:column;align-items:stretch;gap:var(--space-md)}.control-row{flex-direction:column;align-items:stretch;gap:var(--space-md)}.section-header{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.section-actions{justify-content:space-between}.length-control{flex-direction:column;gap:var(--space-sm)}.length-slider{min-width:100%}.format-actions,.generate-actions,.quick-actions{flex-direction:column}.charset-grid{grid-template-columns:1fr}.help-grid,.tips-grid{grid-template-columns:1fr}.presets-grid{grid-template-columns:repeat(2,1fr)}.analysis-grid,.strength-metrics{grid-template-columns:1fr}.examples-grid{grid-template-columns:1fr}}@media (max-width:480px){.tool-header{padding:var(--space-sm)}.tool-content{padding:0 var(--space-sm)}.input-textarea,.json-input,.json-output,.json-textarea,.output-textarea,.text-input,.text-output{min-height:300px;font-size:var(--text-xs)}.password-text{font-size:var(--text-lg)}.presets-grid{grid-template-columns:1fr}.action-btn{padding:var(--space-sm);font-size:var(--text-xs)}.history-details{flex-direction:column;gap:var(--space-xs)}}@media (prefers-reduced-motion:reduce){.action-btn,.preset-btn,.strength-fill,.tool-card{transition:none}.back-button,.conversion-arrow{transform:none}}@media (prefers-contrast:high){.json-textarea,.text-input,.text-output{border-width:2px}.action-btn,.preset-btn{border-width:2px}.strength-bar{border:2px solid var(--color-text-primary)}}.action-btn:focus-visible,.back-button:focus-visible,.copy-btn:focus-visible,.download-btn:focus-visible,.preset-btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}@media print{.tool-header{background:0 0;border:none}.action-btn,.back-button,.copy-btn,.download-btn{display:none}.password-display{border:2px solid #000}.text-input,.text-output{border:1px solid #000;background:0 0}}.color-input-container{display:flex;flex-direction:column;gap:var(--space-lg)}.color-input{width:100px;height:50px;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);cursor:pointer;background:0 0}.color-input:hover{border-color:var(--color-border-focus)}.color-input:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.color-preview-container{display:flex;flex-direction:column;gap:var(--space-lg)}.color-preview{width:100%;height:120px;border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;position:relative;transition:all var(--transition-fast)}.color-preview:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}.color-preview-text{background:rgba(0,0,0,.7);color:#fff;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-family:var(--font-family-mono);font-size:var(--text-sm);font-weight:500}.color-values{display:flex;flex-direction:column;gap:var(--space-md)}.color-values-list{display:flex;flex-direction:column;gap:var(--space-sm)}.color-value-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.color-value-item:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus)}.color-value-label{font-weight:600;color:var(--color-text-secondary);min-width:50px}.color-value-text{font-family:var(--font-family-mono);font-size:var(--text-sm);color:var(--color-text-primary);flex:1;margin:0 var(--space-md)}.copy-value-btn{background:0 0;border:none;color:var(--color-text-tertiary);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast);display:flex;align-items:center}.copy-value-btn:hover{color:var(--color-primary);background-color:var(--color-bg-primary)}.copy-value-btn:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.accessibility-info{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-top:var(--space-lg)}.accessibility-title{font-size:var(--text-lg);font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.accessibility-content{display:flex;flex-direction:column;gap:var(--space-sm)}.contrast-info{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background-color:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid transparent}.contrast-label{font-weight:500;color:var(--color-text-secondary)}.contrast-value{font-family:var(--font-family-mono);font-weight:600;color:var(--color-text-primary)}.contrast-rating{font-size:var(--text-sm);font-weight:600;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.contrast-rating.excellent{background-color:var(--color-success);color:#fff}.contrast-rating.good{background-color:var(--color-success);color:#fff}.contrast-rating.fair{background-color:var(--color-warning);color:var(--color-text-primary)}.contrast-rating.poor{background-color:var(--color-error);color:#fff}.named-colors-controls{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-lg)}.named-colors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-sm);max-height:600px;overflow-y:auto;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);background-color:var(--color-bg-card)}.color-chip{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:all var(--transition-fast);min-height:80px}.color-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--color-border-focus)}.color-chip:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.color-chip-swatch{flex:1;min-height:50px;background-color:var(--color-chip-bg)}.color-chip-name{padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-secondary);font-size:var(--text-xs);font-weight:500;color:var(--color-text-primary);text-align:center;border-top:1px solid var(--color-border-primary)}.color-chip-hex{padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-tertiary);font-family:var(--font-family-mono);font-size:var(--text-xs);color:var(--color-text-secondary);text-align:center;text-transform:uppercase}.no-results{text-align:center;color:var(--color-text-secondary);font-style:italic;padding:var(--space-xl);grid-column:1/-1}.uuid-display-container{display:flex;flex-direction:column;gap:var(--space-md)}.uuid-display{background-color:var(--color-bg-card);border:2px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);font-family:var(--font-family-mono);font-size:var(--text-lg);font-weight:600;color:var(--color-text-primary);text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;word-break:break-all;transition:all var(--transition-fast)}.uuid-display:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-secondary)}.uuid-info{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md)}.uuid-details{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) 0}.uuid-detail-label{font-weight:500;color:var(--color-text-secondary)}.uuid-detail-value{font-family:var(--font-family-mono);font-weight:600;color:var(--color-text-primary)}.batch-options{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.batch-results{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-top:var(--space-lg)}.batch-results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border-primary)}.batch-results-header h3{font-size:var(--text-lg);font-weight:600;color:var(--color-text-primary);margin:0}.batch-uuid-list{display:flex;flex-direction:column;gap:var(--space-sm);max-height:400px;overflow-y:auto;margin-bottom:var(--space-md)}.batch-uuid-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.batch-uuid-item:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus)}.uuid-number{font-weight:600;color:var(--color-text-secondary);min-width:30px;text-align:right}.uuid-value{flex:1;font-family:var(--font-family-mono);font-size:var(--text-sm);color:var(--color-text-primary);word-break:break-all}.copy-uuid-btn{background:0 0;border:none;color:var(--color-text-tertiary);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast);display:flex;align-items:center}.copy-uuid-btn:hover{color:var(--color-primary);background-color:var(--color-bg-primary)}.copy-uuid-btn:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.batch-stats{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md)}.stats-text{font-size:var(--text-sm);color:var(--color-text-secondary)}.uniqueness-status{font-size:var(--text-sm);font-weight:600;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.uniqueness-status.success{background-color:var(--color-success);color:#fff}.uniqueness-status.warning{background-color:var(--color-warning);color:var(--color-text-primary)}.uuid-history{max-height:500px;overflow-y:auto;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-bg-card)}.uuid-history-empty{text-align:center;padding:var(--space-xl);color:var(--color-text-secondary);font-style:italic}.uuid-history-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-bottom:1px solid var(--color-border-primary);transition:all var(--transition-fast)}.uuid-history-item:hover{background-color:var(--color-bg-secondary)}.uuid-history-item:last-child{border-bottom:none}.uuid-history-content{flex:1;display:flex;flex-direction:column;gap:var(--space-xs)}.uuid-history-value{font-family:var(--font-family-mono);font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);word-break:break-all}.uuid-history-time{font-size:var(--text-xs);color:var(--color-text-tertiary)}.copy-history-btn{background:0 0;border:none;color:var(--color-text-tertiary);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast);display:flex;align-items:center}.copy-history-btn:hover{color:var(--color-primary);background-color:var(--color-bg-primary)}.copy-history-btn:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only:focus{position:static;width:auto;height:auto;padding:var(--space-sm);margin:0;overflow:visible;clip:auto;white-space:normal;background-color:var(--color-bg-secondary);border:2px solid var(--color-border-focus);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text-primary)}.color-chip:focus-visible,.copy-history-btn:focus-visible,.copy-uuid-btn:focus-visible,.copy-value-btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-md)}@media (prefers-contrast:high){.color-chip{border-width:2px}.color-value-item{border-width:2px}.uuid-display{border-width:3px}.input-validation{border-width:2px}}@media (prefers-reduced-motion:reduce){.color-chip:hover{transform:none}.color-preview:hover{transform:none}.loading-spinner,.spin,.validation-slide-in{animation:none}*{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}.color-chip[tabindex="0"]:focus{outline:3px solid var(--color-primary);outline-offset:2px;transform:translateY(-2px);z-index:10;position:relative}.named-colors-grid:focus-within{border-color:var(--color-primary)}.named-colors-grid[role=grid]{border:2px solid var(--color-border-primary)}.named-colors-grid[role=grid]:focus-within{border-color:var(--color-primary)}.color-chip-hex,.color-chip-name{background-color:var(--color-bg-card);color:var(--color-text-primary)}.aria-live-region{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.input-validation{margin-top:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;display:none;animation:validation-slide-in var(--transition-fast) ease-out}.input-validation.error{background-color:var(--color-error);color:#fff;border:1px solid var(--color-error)}.input-validation.success{background-color:var(--color-success);color:#fff;border:1px solid var(--color-success)}.input-error{border-color:var(--color-error)!important;box-shadow:0 0 0 2px rgba(239,68,68,.1)!important}.input-success{border-color:var(--color-success)!important;box-shadow:0 0 0 2px rgba(34,197,94,.1)!important}.input-error:focus{outline-color:var(--color-error)!important}.input-success:focus{outline-color:var(--color-success)!important}@keyframes validation-slide-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.batch-uuid-item.generation-error{background-color:rgba(239,68,68,.1);border-color:var(--color-error)}.batch-uuid-item.generation-error .uuid-value{color:var(--color-error);font-style:italic}.generation-retry-btn{background-color:var(--color-warning);color:#fff;border:none;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast)}.generation-retry-btn:hover{background-color:var(--color-error)}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--color-border-primary);border-radius:50%;border-top-color:var(--color-primary);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.generating{opacity:.6;pointer-events:none}.input-validation[role=alert]{position:relative}.input-validation::before{content:'';position:absolute;left:var(--space-sm);top:-4px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}.input-validation.error::before{border-bottom:4px solid var(--color-error)}.input-validation.success::before{border-bottom:4px solid var(--color-success)}@media (max-width:768px){.color-preview-container{gap:var(--space-md)}.color-preview{height:100px}.color-values-list{gap:var(--space-xs)}.color-value-item{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.color-value-text{margin:0}.named-colors-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:400px}.uuid-display{font-size:var(--text-md);padding:var(--space-md)}.batch-options{flex-direction:column;align-items:stretch;gap:var(--space-sm)}.batch-uuid-item{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.uuid-history-item{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.input-validation{font-size:var(--text-xs);padding:var(--space-xs)}}.hash-results{display:flex;flex-direction:column;gap:var(--space-md)}.hash-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);transition:all var(--transition-fast)}.hash-item:hover{border-color:var(--color-border-focus);box-shadow:var(--shadow-sm)}.hash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.hash-label{font-weight:500;color:var(--color-text-primary);font-size:var(--text-sm)}.hash-output{font-family:var(--font-family-mono);font-size:var(--text-sm);color:var(--color-text-secondary);word-break:break-all;line-height:1.4;padding:var(--space-sm);background-color:var(--color-bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--color-border-primary);transition:all var(--transition-fast)}.hash-output.hash-generated{color:var(--color-text-primary);border-color:var(--color-border-focus)}.file-info{display:flex;justify-content:space-between;align-items:center;background-color:var(--color-bg-secondary);padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--color-border-primary);margin-top:var(--space-sm)}.comparison-inputs{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md)}.comparison-result{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);font-weight:500}.comparison-result.match{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success)}.comparison-result.no-match{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error)}.mode-toggle{display:flex;gap:var(--space-xs);padding:var(--space-xs);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border-primary);margin-bottom:var(--space-xl)}.mode-button{flex:1;padding:var(--space-md);border:none;background:0 0;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.mode-button.active{background-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}.mode-button:hover:not(.active){background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.converter-mode{display:none}.converter-mode.active{display:block}.image-upload-container{display:flex;flex-direction:column;gap:var(--space-md)}.drop-zone{border:2px dashed var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-3xl);text-align:center;cursor:pointer;transition:all var(--transition-normal);background-color:var(--color-bg-secondary);color:var(--color-text-secondary)}.drop-zone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.drop-zone.drag-over{border-color:var(--color-primary);background-color:rgba(147,51,234,.05);color:var(--color-primary);transform:scale(1.02)}.drop-zone-hint{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-xs)}.image-preview{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md)}.image-preview img{max-width:100px;max-height:100px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--color-border-primary)}.image-info{flex-grow:1;display:flex;flex-direction:column;gap:var(--space-xs);font-size:var(--text-sm)}.output-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-md);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--space-xs);border:1px solid var(--color-border-primary)}.tab-button{flex:1;padding:var(--space-sm) var(--space-md);border:none;background:0 0;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);font-size:var(--text-sm);transition:all var(--transition-fast)}.tab-button.active{background-color:var(--color-primary);color:#fff}.tab-button:hover:not(.active){background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.converted-image-container{position:relative;min-height:200px}.converted-preview{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-lg);background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md)}.converted-preview img{max-width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius-sm);border:1px solid var(--color-border-primary)}.conversion-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-3xl);color:var(--color-text-muted);text-align:center;border:2px dashed var(--color-border-primary);border-radius:var(--radius-lg);background-color:var(--color-bg-secondary)}.regex-input-container{display:flex;flex-direction:column;gap:var(--space-md)}.regex-input-wrapper{display:flex;align-items:center;gap:var(--space-xs);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-sm);font-family:var(--font-family-mono)}.regex-input-wrapper:focus-within{border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.regex-delimiter{color:var(--color-primary);font-weight:600;font-size:var(--text-lg)}.regex-input{flex:1;min-width:0;width:auto;border:none;background:0 0;color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-base);padding:var(--space-xs) var(--space-sm)}.regex-input:focus{outline:0}.regex-flags{width:80px;min-width:80px;max-width:80px;flex-shrink:0;border:none;background:0 0;color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-base);padding:var(--space-xs) var(--space-sm)}.regex-flags:focus{outline:0}.flags-container{display:flex;flex-wrap:wrap;gap:var(--space-md);padding:var(--space-md);background-color:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border-primary)}.flag-option{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;text-align:left}.flag-option input{margin:0}.regex-error{padding:var(--space-md);background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error);border-radius:var(--radius-md);font-size:var(--text-sm)}.test-text-container{display:flex;flex-direction:column;gap:var(--space-sm)}.test-text-display{min-height:150px;padding:var(--space-md);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:1.5;color:var(--color-text-primary);white-space:pre-wrap;overflow-wrap:break-word}.test-text-display:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.test-text-display:empty:before{content:attr(placeholder);color:var(--color-text-muted);pointer-events:none}.regex-match{background-color:rgba(147,51,234,.2);color:var(--color-primary);border-radius:var(--radius-xs);padding:1px 2px;font-weight:500;border:1px solid rgba(147,51,234,.3)}.test-text-stats{display:flex;justify-content:flex-end}.match-counter{font-size:var(--text-sm);color:var(--color-text-secondary);background-color:var(--color-bg-tertiary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-border-primary)}.no-matches{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-3xl);color:var(--color-text-muted);text-align:center}.no-matches-hint{font-size:var(--text-sm);color:var(--color-text-muted)}.matches-list{display:flex;flex-direction:column;gap:var(--space-md)}.match-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);transition:all var(--transition-fast)}.match-item:hover{border-color:var(--color-border-focus);box-shadow:var(--shadow-sm)}.match-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.match-number{font-weight:600;color:var(--color-primary);font-size:var(--text-sm)}.match-position{font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-family-mono)}.match-content{margin-bottom:var(--space-sm)}.match-text{font-family:var(--font-family-mono);background-color:var(--color-bg-tertiary);padding:var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-border-primary);word-break:break-all;font-size:var(--text-sm)}.capture-groups{margin-top:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs)}.capture-group{display:flex;gap:var(--space-sm);font-size:var(--text-sm)}.group-number{color:var(--color-primary);font-weight:500;font-family:var(--font-family-mono);min-width:2rem}.group-content{font-family:var(--font-family-mono);background-color:var(--color-bg-tertiary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-xs);flex:1}.named-groups{margin-top:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs)}.named-group{display:flex;gap:var(--space-sm);font-size:var(--text-sm)}.group-name{color:var(--color-secondary);font-weight:500;font-family:var(--font-family-mono)}.replace-container{display:flex;flex-direction:column;gap:var(--space-md)}.replace-input-group{display:flex;flex-direction:column;gap:var(--space-sm)}.replace-output-container{display:flex;flex-direction:column;gap:var(--space-sm)}@media (max-width:768px){.mode-toggle{flex-direction:column}.flags-container{flex-direction:column;gap:var(--space-sm)}.comparison-inputs{gap:var(--space-md)}.hash-header{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.match-header{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}.output-tabs{flex-direction:column}.image-preview{flex-direction:column;text-align:center}}.jwt-input{font-family:var(--font-family-mono);font-size:var(--text-sm)}.jwt-error{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-sm)}.jwt-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}.status-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);display:flex;justify-content:space-between;align-items:center}.status-label{font-weight:500;color:var(--color-text-secondary)}.status-value{color:var(--color-text-primary)}.status-value.status-valid{color:var(--color-success)}.status-value.status-invalid{color:var(--color-error)}.status-value.status-unknown{color:var(--color-text-tertiary)}.jwt-json-display{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);font-family:var(--font-family-mono);font-size:var(--text-sm);white-space:pre-wrap;overflow-x:auto}.claims-analysis{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg)}.claims-grid{display:grid;gap:var(--space-md)}.claim-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md)}.claim-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.claim-name{font-weight:500;color:var(--color-text-primary)}.claim-type{background-color:var(--color-primary);color:#fff;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs)}.claim-type.custom{background-color:var(--color-text-tertiary)}.claim-description{color:var(--color-text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-sm)}.claim-value{font-family:var(--font-family-mono);color:var(--color-text-primary);background-color:var(--color-bg-tertiary);padding:var(--space-xs);border-radius:var(--radius-sm);word-break:break-all}.security-notice{background-color:var(--color-warning-bg);border:1px solid var(--color-warning);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-xl) 0}.notice-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}.notice-header h3{color:var(--color-warning);margin:0}.url-input{font-family:var(--font-family-mono);font-size:var(--text-sm);min-height:auto!important;height:auto!important;line-height:1.2!important;padding:var(--space-sm) var(--space-md)!important}.text-input:not(textarea){min-height:auto!important;height:auto!important;line-height:1.2!important;padding:var(--space-sm) var(--space-md)!important}.url-error{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-sm)}.url-validation{font-size:var(--text-sm);font-weight:500}.url-validation.valid{color:var(--color-success)}.url-validation.invalid{color:var(--color-error)}.url-components-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-md)}.component-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md)}.component-label{display:block;font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.component-value-container{display:flex;gap:var(--space-sm)}.component-input{flex:1;padding:var(--space-sm);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);background-color:var(--color-bg-card);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-sm);height:auto;line-height:1.2}.component-input:focus{outline:2px solid var(--color-border-focus);border-color:var(--color-border-focus)}.component-input[readonly]{background-color:var(--color-bg-tertiary);color:var(--color-text-secondary)}.component-copy-btn{background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);padding:var(--space-xs);color:var(--color-text-tertiary);cursor:pointer;transition:all var(--transition-fast)}.component-copy-btn:hover{color:var(--color-primary);background-color:var(--color-bg-primary)}.query-params-container{min-height:200px}.query-params-list{display:flex;flex-direction:column;gap:var(--space-md)}.query-param-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md)}.param-controls{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm)}.param-key,.param-value{flex:1;padding:var(--space-sm);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);background-color:var(--color-bg-card);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-sm)}.param-remove-btn{background:var(--color-error-bg);border:1px solid var(--color-error);border-radius:var(--radius-sm);padding:var(--space-xs);color:var(--color-error);cursor:pointer}.param-remove-btn:hover{background:var(--color-error);color:#fff}.param-info{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-xs);color:var(--color-text-tertiary)}.built-url-container{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md)}.built-url-display{font-family:var(--font-family-mono);color:var(--color-text-primary);word-break:break-all}.encoding-tools{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg)}.encoding-input-group{margin-bottom:var(--space-md)}.encoding-results{display:grid;gap:var(--space-md)}.encoding-result-item{display:flex;flex-direction:column;gap:var(--space-sm)}.encoding-label{font-weight:500;color:var(--color-text-secondary)}.encoding-output-container{display:flex;gap:var(--space-sm)}.encoding-output{flex:1;padding:var(--space-sm);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-sm);height:auto;line-height:1.2}.current-time-display{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg)}.current-time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md)}.time-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm);background-color:var(--color-bg-secondary);border-radius:var(--radius-sm)}.time-label{font-weight:500;color:var(--color-text-secondary)}.time-value{font-family:var(--font-family-mono);color:var(--color-text-primary)}.timestamp-input{font-family:var(--font-family-mono);font-size:var(--text-sm)}.timestamp-error{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-sm)}.format-detection{font-size:var(--text-sm);color:var(--color-primary);font-weight:500}.date-input-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md)}.date-input-group{display:flex;flex-direction:column;gap:var(--space-sm)}.date-input,.option-select,.time-input{padding:var(--space-sm);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);background-color:var(--color-bg-card);color:var(--color-text-primary);font-size:var(--text-sm);height:auto;line-height:1.2}.config-group input,.config-group select,.diff-config-grid input,.diff-config-grid select,.sql-config-grid input,.sql-config-grid select,.xml-config-grid input,.xml-config-grid select{padding:var(--space-sm) var(--space-md);height:auto;line-height:1.2}.conversion-results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-md)}.result-item{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md)}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.result-label{font-weight:500;color:var(--color-text-secondary)}.result-copy-btn{background:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);padding:var(--space-xs);color:var(--color-text-tertiary);cursor:pointer}.result-copy-btn:hover{color:var(--color-primary);background-color:var(--color-bg-primary)}.result-value{font-family:var(--font-family-mono);color:var(--color-text-primary);word-break:break-all}.batch-conversion-container{display:grid;gap:var(--space-lg)}.batch-input-container{display:flex;flex-direction:column;gap:var(--space-sm)}.batch-textarea{min-height:150px;font-family:var(--font-family-mono);font-size:var(--text-sm)}.batch-results{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg)}.batch-results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.batch-count{color:var(--color-text-secondary);font-size:var(--text-sm)}.batch-results-list{display:flex;flex-direction:column;gap:var(--space-md)}.batch-result-item{border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md)}.batch-result-item.success{background-color:var(--color-success-bg);border-color:var(--color-success)}.batch-result-item.error{background-color:var(--color-error-bg);border-color:var(--color-error)}.batch-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.batch-index{font-weight:500;color:var(--color-text-secondary)}.batch-original{font-family:var(--font-family-mono);color:var(--color-text-primary)}.batch-format{background-color:var(--color-primary);color:#fff;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs)}.batch-error{background-color:var(--color-error);color:#fff;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:var(--text-xs)}.batch-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-sm)}.result-cell{display:flex;flex-direction:column;gap:var(--space-xs)}.cell-label{font-weight:500;color:var(--color-text-secondary);font-size:var(--text-xs)}.cell-value{font-family:var(--font-family-mono);color:var(--color-text-primary);font-size:var(--text-sm);word-break:break-all}.batch-error-message{color:var(--color-error);font-size:var(--text-sm);margin-top:var(--space-sm)}@media (max-width:768px){.conversion-results-grid,.current-time-grid,.date-input-container,.jwt-status-grid,.url-components-grid{grid-template-columns:1fr}.component-value-container,.encoding-output-container,.param-controls{flex-direction:column}.batch-result-header,.result-header{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.batch-result-grid{grid-template-columns:1fr}}.sql-input{font-family:var(--font-family-mono);background-color:var(--color-bg-card);color:var(--color-text-primary)}.sql-output{background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);padding:var(--space-md);border-radius:var(--radius-md);overflow-x:auto;white-space:pre-wrap}.sql-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}.config-group{display:flex;flex-direction:column;gap:var(--space-sm)}.config-label{font-weight:500;color:var(--color-text-primary);font-size:var(--text-sm)}.config-select{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-bg-card);color:var(--color-text-primary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast)}.config-select:focus{outline:2px solid var(--color-border-focus);outline-offset:2px;border-color:var(--color-border-focus)}.sql-analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}.analysis-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md);background-color:var(--color-bg-tertiary);border-radius:var(--radius-sm)}.analysis-label{font-weight:500;color:var(--color-text-secondary);font-size:var(--text-sm)}.analysis-value{font-weight:600;color:var(--color-text-primary);font-size:var(--text-sm)}.detected-elements{margin-top:var(--space-lg)}.detected-title{font-size:var(--text-md);font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-md)}.elements-list{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.sql-keyword{color:#569cd6;font-weight:600}.sql-function{color:#dcdcaa;font-weight:500}.sql-string{color:#ce9178}.sql-number{color:#b5cea8}.sql-comment{color:#6a9955;font-style:italic}.sql-identifier{color:#9cdcfe}.xml-input{font-family:var(--font-family-mono);background-color:var(--color-bg-card);color:var(--color-text-primary)}.xml-output{background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);padding:var(--space-md);border-radius:var(--radius-md);overflow-x:auto;white-space:pre-wrap}.xml-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}.config-toggles{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-md)}.config-toggle{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:var(--text-sm);color:var(--color-text-primary)}.config-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary)}.xml-analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg)}.validation-status{font-weight:500;font-size:var(--text-sm)}.validation-status.valid{color:#10b981}.validation-status.invalid{color:#ef4444}.xml-tree-view{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);max-height:600px;overflow:auto}.xml-tree-container{font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:var(--leading-normal)}.tree-element{margin:2px 0}.tree-toggle{cursor:pointer;user-select:none;color:var(--color-text-tertiary);margin-right:var(--space-xs)}.tree-spacer{margin-right:1em}.tree-tag{color:#569cd6}.tree-attr-name{color:#92c5f7}.tree-attr-value{color:#ce9178}.tree-content{color:var(--color-text-primary);margin:0 var(--space-xs)}.tree-children{margin-left:var(--space-md)}.namespace-info{margin-top:var(--space-lg)}.namespace-title{font-size:var(--text-md);font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-md)}.namespace-list{background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);padding:var(--space-md)}.namespace-declarations{list-style:none;margin:0;padding:0}.namespace-declarations li{padding:var(--space-xs) 0;border-bottom:1px solid var(--color-border-primary)}.namespace-declarations li:last-child{border-bottom:none}.no-namespaces{color:var(--color-text-tertiary);font-style:italic;text-align:center;padding:var(--space-md)}.xpath-tester{margin-top:var(--space-lg)}.xpath-title{font-size:var(--text-md);font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-md)}.xpath-input-group{display:flex;gap:var(--space-sm);margin-bottom:var(--space-md)}.xpath-input{flex:1;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);background-color:var(--color-bg-card);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--text-sm)}.xpath-button{padding:var(--space-sm) var(--space-md);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:500;display:flex;align-items:center;gap:var(--space-xs);transition:all var(--transition-fast)}.xpath-button:hover{background:var(--color-primary-hover)}.xpath-results{background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);padding:var(--space-md);font-family:var(--font-family-mono);font-size:var(--text-sm)}.xpath-result-count{font-weight:500;color:var(--color-text-primary);margin-bottom:var(--space-sm)}.xpath-result-list{list-style:none;margin:0;padding:0}.xpath-result-list li{padding:var(--space-xs) 0;color:var(--color-text-secondary)}.xpath-error,.xpath-no-results{color:var(--color-text-tertiary);font-style:italic;text-align:center;padding:var(--space-md)}.xml-declaration{color:#569cd6;font-weight:500}.xml-comment{color:#6a9955;font-style:italic}.xml-cdata{color:#9cdcfe}.xml-tag{color:#569cd6;font-weight:500}.xml-attr{color:#92c5f7}.xml-attr-name{color:#92c5f7}.xml-operator{color:var(--color-text-primary)}.xml-attr-value{color:#ce9178}.xml-content{color:var(--color-text-primary)}.diff-input-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.diff-input-section{display:flex;flex-direction:column}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.input-title{font-size:var(--text-md);font-weight:500;color:var(--color-text-primary)}.input-actions{display:flex;gap:var(--space-sm)}.input-action-btn{padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-xs);transition:all var(--transition-fast)}.input-action-btn:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.diff-text-input{min-height:700px;font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);resize:vertical}.left-text,.right-text{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-md);color:var(--color-text-primary)}.diff-config-grid{display:grid;gap:var(--space-md);margin-bottom:var(--space-md)}.diff-options{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-md)}.diff-option{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;font-size:var(--text-sm);color:var(--color-text-primary)}.diff-option input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary)}.diff-stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-md);margin-bottom:var(--space-lg);padding:var(--space-md);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md)}.diff-stat{text-align:center}.stat-value{display:block;font-size:var(--text-xl);font-weight:700;color:var(--color-text-primary)}.stat-value.added{color:#10b981}.stat-value.removed{color:#ef4444}.stat-value.modified{color:#f59e0b}.stat-label{display:block;font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-xs);text-transform:uppercase;letter-spacing:.05em}.diff-display{border:1px solid var(--color-border-primary);border-radius:var(--radius-md);overflow:hidden;background-color:var(--color-bg-card)}.diff-view-container{min-height:400px;max-height:800px;overflow:auto}.diff-view{font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:var(--leading-normal)}.diff-view.side-by-side{display:grid;grid-template-columns:1fr 1fr}.diff-view.inline,.diff-view.unified{display:block}.diff-column{border-right:1px solid var(--color-border-primary)}.diff-column.right-column{border-right:none}.column-header{background-color:var(--color-bg-secondary);padding:var(--space-sm) var(--space-md);font-weight:500;color:var(--color-text-primary);border-bottom:1px solid var(--color-border-primary);text-align:center}.diff-content{padding:var(--space-sm)}.diff-line{display:flex;align-items:center;min-height:1.5em;padding:1px var(--space-xs);border-radius:2px;margin:1px 0}.line-num{display:inline-block;width:60px;text-align:right;color:var(--color-text-tertiary);font-size:var(--text-xs);margin-right:var(--space-sm);user-select:none;flex-shrink:0}.line-content{white-space:pre-wrap;word-break:break-all;flex:1}.diff-prefix{width:20px;text-align:center;margin-right:var(--space-sm);font-weight:600}.diff-unchanged{background-color:transparent}.diff-added{background-color:rgba(16,185,129,.1);border-left:3px solid #10b981}.diff-removed{background-color:rgba(239,68,68,.1);border-left:3px solid #ef4444}.diff-modified{background-color:rgba(245,158,11,.1);border-left:3px solid #f59e0b}.diff-empty{background-color:var(--color-bg-secondary);opacity:.5}.diff-legend{display:flex;justify-content:center;gap:var(--space-lg);padding:var(--space-md);background-color:var(--color-bg-secondary);border-top:1px solid var(--color-border-primary);font-size:var(--text-xs)}.legend-item{display:flex;align-items:center;gap:var(--space-xs)}.legend-color{width:12px;height:12px;border-radius:2px;border-left:3px solid}.legend-color.diff-added{background-color:rgba(16,185,129,.1);border-color:#10b981}.legend-color.diff-removed{background-color:rgba(239,68,68,.1);border-color:#ef4444}.legend-color.diff-modified{background-color:rgba(245,158,11,.1);border-color:#f59e0b}.legend-color.diff-unchanged{background-color:transparent;border-color:var(--color-border-primary)}.legend-text{color:var(--color-text-secondary)}.export-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md)}.export-option{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-lg);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;color:var(--color-text-primary)}.export-option:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus);transform:translateY(-2px);box-shadow:var(--shadow-md)}.export-option svg{color:var(--color-primary)}.export-option span{font-weight:500;text-align:center}@media (max-width:768px){.diff-config-grid,.diff-stats-container,.sql-analysis-grid,.sql-config-grid,.xml-analysis-grid,.xml-config-grid{grid-template-columns:1fr}.diff-input-container{grid-template-columns:1fr;gap:var(--space-md)}.diff-view.side-by-side{display:block}.diff-column{border-right:none;border-bottom:1px solid var(--color-border-primary)}.diff-column.right-column{border-bottom:none}.config-toggles,.diff-options{flex-direction:column;align-items:flex-start}.diff-legend{flex-wrap:wrap;gap:var(--space-sm)}.export-options-grid{grid-template-columns:1fr 1fr}}.css-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg);margin-bottom:var(--space-lg)}.css-input{font-family:Monaco,Consolas,'Courier New',monospace;font-size:var(--text-sm);line-height:1.5}.css-output{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg);font-family:Monaco,Consolas,'Courier New',monospace;font-size:var(--text-sm);line-height:1.5;white-space:pre-wrap;overflow-x:auto;max-height:400px}.css-validation{font-size:var(--text-xs);font-weight:500;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);margin-left:var(--space-sm)}.css-validation.valid{background-color:var(--color-success-bg);color:var(--color-success-text)}.css-validation.invalid{background-color:var(--color-error-bg);color:var(--color-error-text)}.css-error{background-color:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error-text);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm);margin-top:var(--space-sm)}.css-comment{color:#6a9955;font-style:italic}.css-at-rule{color:#c586c0;font-weight:500}.css-property{color:#9cdcfe}.css-color{color:#ce9178;font-weight:500}.css-value{color:#b5cea8}[data-theme=dark] .css-comment{color:#6a9955}[data-theme=dark] .css-at-rule{color:#c586c0}[data-theme=dark] .css-property{color:#9cdcfe}[data-theme=dark] .css-color{color:#ce9178}[data-theme=dark] .css-value{color:#b5cea8}[data-theme=light] .css-comment{color:green}[data-theme=light] .css-at-rule{color:purple}[data-theme=light] .css-property{color:#0070c1}[data-theme=light] .css-color{color:#a31515}[data-theme=light] .css-value{color:#09885a}.html-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-lg);margin-bottom:var(--space-lg)}.html-input{font-family:Monaco,Consolas,'Courier New',monospace;font-size:var(--text-sm);line-height:1.5}.html-output{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg);font-family:Monaco,Consolas,'Courier New',monospace;font-size:var(--text-sm);line-height:1.5;white-space:pre-wrap;overflow-x:auto;max-height:400px}.html-validation{font-size:var(--text-xs);font-weight:500;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);margin-left:var(--space-sm)}.html-validation.valid{background-color:var(--color-success-bg);color:var(--color-success-text)}.html-validation.invalid{background-color:var(--color-error-bg);color:var(--color-error-text)}.html-error{background-color:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error-text);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm);margin-top:var(--space-sm)}.validation-container{display:flex;flex-direction:column;gap:var(--space-md)}.validation-results{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg)}.validation-status.valid{color:var(--color-success-text)}.validation-status.invalid{color:var(--color-error-text)}.validation-errors{margin-top:var(--space-md);color:var(--color-error-text)}.validation-warnings{margin-top:var(--space-md);color:var(--color-warning-text)}.validation-info{margin-top:var(--space-md);color:var(--color-info-text)}.structure-analysis{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg)}.html-tag{color:#569cd6;font-weight:500}.html-attr{color:#92c5f8}.html-attr-name{color:#92c5f8}.html-attr-value{color:#ce9178}.html-comment{color:#6a9955;font-style:italic}.html-doctype{color:#c586c0;font-weight:500}[data-theme=dark] .html-tag{color:#569cd6}[data-theme=dark] .html-attr,[data-theme=dark] .html-attr-name{color:#92c5f8}[data-theme=dark] .html-attr-value{color:#ce9178}[data-theme=dark] .html-comment{color:#6a9955}[data-theme=dark] .html-doctype{color:#c586c0}[data-theme=light] .html-tag{color:maroon}[data-theme=light] .html-attr,[data-theme=light] .html-attr-name{color:#00f}[data-theme=light] .html-attr-value{color:#a31515}[data-theme=light] .html-comment{color:green}[data-theme=light] .html-doctype{color:purple}.conversion-controls{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl)}.direction-toggle{display:flex;gap:var(--space-sm);background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);padding:var(--space-xs)}.direction-btn{flex:1;padding:var(--space-md) var(--space-lg);border:none;border-radius:var(--radius-sm);background:0 0;color:var(--color-text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.direction-btn.active{background-color:var(--color-bg-card);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}.direction-btn:hover:not(.active){color:var(--color-text-primary)}.conversion-options{display:flex;flex-wrap:wrap;gap:var(--space-lg)}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);min-height:500px}.editor-pane{display:flex;flex-direction:column;background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);overflow:hidden}.pane-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background-color:var(--color-bg-tertiary);border-bottom:1px solid var(--color-border-primary)}.pane-title{font-size:var(--text-sm);font-weight:500;color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-sm)}.pane-actions{display:flex;gap:var(--space-sm)}.pane-content{flex:1;display:flex;flex-direction:column}.editor-textarea{flex:1;border:none;background:0 0;color:var(--color-text-primary);font-family:Monaco,Consolas,'Courier New',monospace;font-size:var(--text-sm);line-height:1.5;padding:var(--space-lg);resize:none;outline:0;white-space:pre-wrap;word-wrap:break-word}.output-display{flex:1;padding:var(--space-lg);overflow-y:auto}.code-view{font-family:Monaco,Consolas,'Courier New',monospace;font-size:var(--text-sm);line-height:1.5;white-space:pre-wrap}.preview-view{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6}.preview-view h1,.preview-view h2,.preview-view h3,.preview-view h4,.preview-view h5,.preview-view h6{margin-top:var(--space-lg);margin-bottom:var(--space-md)}.preview-view p{margin-bottom:var(--space-md)}.preview-view code{background-color:var(--color-bg-tertiary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-family:Monaco,Consolas,'Courier New',monospace;font-size:.875em}.preview-view pre{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-lg);overflow-x:auto;margin:var(--space-md) 0}.preview-view pre code{background:0 0;padding:0}.preview-view table{border-collapse:collapse;width:100%;margin:var(--space-md) 0}.preview-view td,.preview-view th{border:1px solid var(--color-border-primary);padding:var(--space-sm) var(--space-md);text-align:left}.preview-view th{background-color:var(--color-bg-tertiary);font-weight:500}.preview-view blockquote{border-left:4px solid var(--color-border-primary);padding-left:var(--space-lg);margin:var(--space-lg) 0;color:var(--color-text-secondary)}.pane-stats{padding:var(--space-sm) var(--space-lg);background-color:var(--color-bg-tertiary);border-top:1px solid var(--color-border-primary);font-size:var(--text-xs);color:var(--color-text-secondary)}.export-controls{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}.custom-css-section{border:1px solid var(--color-border-primary);border-radius:var(--radius-md);overflow:hidden}.custom-css-toggle{display:block;width:100%;padding:var(--space-md) var(--space-lg);background-color:var(--color-bg-tertiary);border:none;cursor:pointer;color:var(--color-text-primary);font-size:var(--text-sm);font-weight:500}.custom-css-toggle:hover{background-color:var(--color-bg-secondary)}.custom-css-input{width:100%;border:none;background-color:var(--color-bg-card);color:var(--color-text-primary);font-family:Monaco,Consolas,'Courier New',monospace;font-size:var(--text-sm);line-height:1.5;padding:var(--space-lg);resize:vertical;outline:0}.sample-buttons{display:flex;flex-wrap:wrap;gap:var(--space-md)}@media (max-width:768px){.css-config-grid,.html-config-grid{grid-template-columns:1fr;gap:var(--space-md)}.editor-container{grid-template-columns:1fr;gap:var(--space-md);min-height:400px}.direction-toggle{flex-direction:column;gap:var(--space-xs)}.direction-btn{text-align:center}.conversion-options{flex-direction:column;gap:var(--space-md)}.export-controls{flex-direction:column;gap:var(--space-sm)}.pane-actions{flex-wrap:wrap;gap:var(--space-xs)}.action-button.small{padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs)}}.date-input-container{display:flex;flex-direction:column;gap:var(--space-md)}.date-input-group{display:flex;align-items:center;gap:var(--space-md)}.date-input-group .option-label{min-width:80px;text-align:left}@media (max-width:768px){.date-input-container{gap:var(--space-sm)}.date-input-group{flex-direction:column;align-items:stretch;gap:var(--space-xs)}.date-input-group .option-label{min-width:auto;text-align:left}}