.action-button,.btn-primary{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:40px;text-decoration:none;user-select:none;white-space:nowrap}.action-button:hover,.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.action-button:focus,.btn-primary:focus{outline:2px solid var(--color-border-focus);outline-offset:2px}.action-button:active,.btn-primary:active{transform:translateY(0)}.action-button.secondary,.btn-secondary,.input-action-btn{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary)}.action-button.secondary:hover,.btn-secondary:hover,.input-action-btn:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus);transform:translateY(-1px)}.action-button.small,.btn-small{padding:var(--space-xs) var(--space-md);font-size:var(--text-xs);min-height:32px}.action-button.large,.btn-large{padding:var(--space-md) var(--space-xl);font-size:var(--text-base);min-height:48px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:var(--space-sm);background-color:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.icon-button:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus);transform:translateY(-1px)}.action-button.active,.btn-primary.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.action-button.active:hover,.btn-primary.active:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.action-button:disabled,.btn-primary:disabled,.btn-secondary:disabled,.icon-button:disabled{opacity:.5;cursor:not-allowed;transform:none;pointer-events:none}.form-input,.text-input,input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url]{width:100%;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);color:var(--color-text-primary);font-size:var(--text-base);font-family:var(--font-family-sans);line-height:1.5;transition:all var(--transition-fast);min-height:40px}.form-input:focus,.text-input:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.form-textarea,.output-textarea,textarea{width:100%;padding:var(--space-md);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);font-family:var(--font-family-sans);line-height:1.5;transition:all var(--transition-fast);resize:vertical;min-height:120px}.form-textarea:focus,.output-textarea:focus,textarea:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.output-textarea{min-height:300px;font-family:var(--font-family-mono);font-size:var(--text-sm);line-height:1.6;padding:var(--space-lg);background-color:var(--color-bg-code);border-color:var(--color-border-secondary)}.output-textarea[readonly]{background-color:var(--color-bg-secondary);cursor:text}.output-textarea[readonly]:focus{border-color:var(--color-border-focus);background-color:var(--color-bg-card)}[data-theme=dark] .form-textarea,[data-theme=dark] .output-textarea,[data-theme=dark] textarea{background-color:var(--color-bg-secondary);border-color:var(--color-border-secondary);color:var(--color-text-primary)}[data-theme=dark] .output-textarea{background-color:var(--color-bg-tertiary)}[data-theme=dark] .output-textarea[readonly]{background-color:var(--color-bg-secondary)}[data-theme=dark] .output-textarea[readonly]:focus{background-color:var(--color-bg-tertiary)}.form-select,.option-select,select{width:100%;padding:var(--space-sm) var(--space-md);padding-right:2.5rem;background-color:var(--color-bg-card);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);font-family:var(--font-family-sans);cursor:pointer;transition:all var(--transition-fast);min-height:40px;appearance:none}.form-select:focus,.option-select:focus,select:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.form-select:hover,.option-select:hover,select:hover{border-color:var(--color-border-secondary)}.checkbox-option input[type=checkbox],.form-checkbox,input[type=checkbox]{appearance:none;width:1.25rem;height:1.25rem;background-color:var(--color-bg-card);border:2px solid var(--color-border-primary);border-radius:var(--radius-sm);position:relative;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.checkbox-option input[type=checkbox]:checked,.form-checkbox:checked,input[type=checkbox]:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-option input[type=checkbox]:checked::after,.form-checkbox:checked::after,input[type=checkbox]:checked::after{content:'';position:absolute;left:3px;top:0;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-option input[type=checkbox]:focus,.form-checkbox:focus,input[type=checkbox]:focus{outline:0;box-shadow:0 0 0 3px rgba(147,51,234,.2)}.checkbox-option,.option-checkbox{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;color:var(--color-text-primary);font-size:var(--text-base);line-height:var(--leading-normal);margin-bottom:var(--space-sm)}.checkbox-option span,.option-checkbox span{user-select:none}.form-radio,input[type=radio]{appearance:none;width:1.25rem;height:1.25rem;background-color:var(--color-bg-card);border:2px solid var(--color-border-primary);border-radius:50%;position:relative;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.form-radio:checked,input[type=radio]:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.form-radio:checked::after,input[type=radio]:checked::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;background-color:#fff;border-radius:50%;transform:translate(-50%,-50%)}.form-radio:focus,input[type=radio]:focus{outline:0;box-shadow:0 0 0 3px rgba(147,51,234,.2)}.form-range,.range-input,.range-slider,input[type=range]{-webkit-appearance:none!important;appearance:none!important;width:100%!important;height:8px!important;background:var(--color-bg-tertiary)!important;border:none!important;border-radius:var(--radius-full)!important;outline:0!important;cursor:pointer!important;transition:all var(--transition-fast)!important;margin:var(--space-md) 0!important}#keyLength.range-slider{-webkit-appearance:none!important;appearance:none!important;width:100%!important;height:8px!important;background:var(--color-bg-tertiary)!important;border:none!important;border-radius:var(--radius-full)!important;outline:0!important;cursor:pointer!important;transition:all var(--transition-fast)!important;margin:var(--space-md) 0!important}.form-range:hover,.range-input:hover,.range-slider:hover,input[type=range]:hover{background:var(--color-bg-secondary)}.form-range::-webkit-slider-thumb,.range-input::-webkit-slider-thumb,.range-slider::-webkit-slider-thumb,input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--color-primary);border:none;border-radius:50%;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px rgba(0,0,0,.15)}.form-range::-webkit-slider-thumb:hover,.range-input::-webkit-slider-thumb:hover,.range-slider::-webkit-slider-thumb:hover,input[type=range]::-webkit-slider-thumb:hover{background:var(--color-primary-hover);transform:scale(1.15);box-shadow:0 4px 12px rgba(0,0,0,.25)}.form-range::-moz-range-thumb,.range-input::-moz-range-thumb,.range-slider::-moz-range-thumb,input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--color-primary);border:none;border-radius:50%;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px rgba(0,0,0,.15)}.form-range::-moz-range-thumb:hover,.range-input::-moz-range-thumb:hover,.range-slider::-moz-range-thumb:hover,input[type=range]::-moz-range-thumb:hover{background:var(--color-primary-hover);transform:scale(1.15);box-shadow:0 4px 12px rgba(0,0,0,.25)}.form-range:focus,.range-input:focus,.range-slider:focus,input[type=range]:focus{outline:0;box-shadow:0 0 0 3px rgba(147,51,234,.2)}[data-theme=dark] .form-range,[data-theme=dark] .range-input,[data-theme=dark] .range-slider,[data-theme=dark] input[type=range]{background:var(--color-bg-secondary)!important;border:none!important}[data-theme=dark] .form-range:hover,[data-theme=dark] .range-input:hover,[data-theme=dark] .range-slider:hover,[data-theme=dark] input[type=range]:hover{background:var(--color-bg-tertiary)!important}[data-theme=dark] #keyLength.range-slider{background:var(--color-bg-secondary)!important;border:none!important}[data-theme=dark] #keyLength.range-slider:hover{background:var(--color-bg-tertiary)!important}[data-theme=dark] .form-range::-webkit-slider-thumb,[data-theme=dark] .range-input::-webkit-slider-thumb,[data-theme=dark] .range-slider::-webkit-slider-thumb,[data-theme=dark] input[type=range]::-webkit-slider-thumb{background:var(--color-primary);border:none;box-shadow:0 2px 8px rgba(0,0,0,.4)}[data-theme=dark] .form-range::-webkit-slider-thumb:hover,[data-theme=dark] .range-input::-webkit-slider-thumb:hover,[data-theme=dark] .range-slider::-webkit-slider-thumb:hover,[data-theme=dark] input[type=range]::-webkit-slider-thumb:hover{background:var(--color-primary-hover);box-shadow:0 4px 12px rgba(0,0,0,.5)}[data-theme=dark] .form-range::-moz-range-thumb,[data-theme=dark] .range-input::-moz-range-thumb,[data-theme=dark] .range-slider::-moz-range-thumb,[data-theme=dark] input[type=range]::-moz-range-thumb{background:var(--color-primary);border:none;box-shadow:0 2px 8px rgba(0,0,0,.4)}[data-theme=dark] .form-range::-moz-range-thumb:hover,[data-theme=dark] .range-input::-moz-range-thumb:hover,[data-theme=dark] .range-slider::-moz-range-thumb:hover,[data-theme=dark] input[type=range]::-moz-range-thumb:hover{background:var(--color-primary-hover);box-shadow:0 4px 12px rgba(0,0,0,.5)}.color-input,.form-color,input[type=color]{width:60px;height:40px;padding:0;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);cursor:pointer;background:0 0;transition:all var(--transition-fast)}.color-input:hover,.form-color:hover,input[type=color]:hover{border-color:var(--color-border-focus);transform:scale(1.05)}.form-number,.number-input,input[type=number]{width:100%;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);color:var(--color-text-primary);font-size:var(--text-base);font-family:var(--font-family-mono);line-height:1.5;transition:all var(--transition-fast);min-height:40px}.form-group,.option-group{margin-bottom:var(--space-lg)}.config-label,.form-label,.option-label{display:block;margin-bottom:var(--space-sm);color:var(--color-text-primary);font-size:var(--text-sm);font-weight:500;line-height:var(--leading-normal)}.text-title{font-size:var(--text-2xl);font-weight:600;color:var(--color-text-primary);line-height:var(--leading-tight)}.text-subtitle{font-size:var(--text-lg);font-weight:500;color:var(--color-text-primary);line-height:var(--leading-normal)}.text-body{font-size:var(--text-base);font-weight:400;color:var(--color-text-primary);line-height:var(--leading-relaxed)}.text-caption{font-size:var(--text-sm);font-weight:400;color:var(--color-text-secondary);line-height:var(--leading-normal)}.text-small{font-size:var(--text-xs);font-weight:400;color:var(--color-text-tertiary);line-height:var(--leading-normal)}.icon{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon.icon-xs{width:16px;height:16px}.icon.icon-sm{width:20px;height:20px}.icon.icon-md{width:24px;height:24px}.icon.icon-lg{width:32px;height:32px}.icon.icon-xl{width:40px;height:40px}.spacing-xs{margin-bottom:var(--space-xs)}.spacing-sm{margin-bottom:var(--space-sm)}.spacing-md{margin-bottom:var(--space-md)}.spacing-lg{margin-bottom:var(--space-lg)}.spacing-xl{margin-bottom:var(--space-xl)}.form-grid{display:grid;gap:var(--space-lg)}.form-grid-2{grid-template-columns:repeat(2,1fr)}.form-grid-3{grid-template-columns:repeat(3,1fr)}.form-grid-4{grid-template-columns:repeat(4,1fr)}@media (max-width:768px){.form-grid-2,.form-grid-3,.form-grid-4{grid-template-columns:1fr}}@media (hover:none) and (pointer:coarse){.action-button,.btn-primary,.btn-secondary,.icon-button{min-height:44px;min-width:44px;padding:var(--space-sm) var(--space-md);touch-action:manipulation}.form-input,.form-select,.option-select,.text-input,input[type=email],input[type=number],input[type=search],input[type=text],select{min-height:44px;font-size:16px}.checkbox-option input[type=checkbox],.form-checkbox,.form-radio,input[type=checkbox],input[type=radio]{width:1.5rem;height:1.5rem}}@media (max-width:768px){.action-button,.btn-primary,.btn-secondary{padding:var(--space-xs) var(--space-md);font-size:var(--text-sm)}.form-input,.form-select,.form-textarea,.option-select,.text-input,textarea{padding:var(--space-sm)}}@media (prefers-reduced-motion:reduce){.action-button,.btn-primary,.btn-secondary,.checkbox-option input[type=checkbox],.form-checkbox,.form-input,.form-radio,.form-select,.icon-button,.option-select,.text-input,input[type=checkbox],input[type=radio]{transition:none}}@media (prefers-contrast:high){.action-button,.btn-primary{border:2px solid currentColor}.form-input,.form-select,.form-textarea,.option-select,.text-input,textarea{border-width:2px}.checkbox-option input[type=checkbox],.form-checkbox,.form-radio,input[type=checkbox],input[type=radio]{border-width:3px}}.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:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text-primary)}#searchResultsText,.search-results-text{color:var(--color-text-primary);font-weight:500}.search-navigation{display:flex;align-items:center;gap:var(--space-sm);color:var(--color-text-primary)}.search-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:var(--space-xs);background-color:var(--color-bg-tertiary);color:var(--color-text-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-bg-secondary);border-color:var(--color-border-focus);color:var(--color-text-primary)}.search-nav-btn:disabled{opacity:.5;cursor:not-allowed}#searchPosition,.search-position{color:var(--color-text-primary);font-weight:500;font-size:var(--text-sm);min-width:4rem;text-align:center}.search-result-item{transition:all var(--transition-fast);cursor:pointer;color:var(--color-text-primary);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-xs)}.search-result-item:hover{transform:translateX(4px);background-color:var(--color-bg-secondary);border-color:var(--color-primary);color:var(--color-text-primary)}.search-result-title{color:var(--color-text-primary);font-weight:500;font-size:var(--text-base)}.search-result-description{color:var(--color-text-secondary);font-size:var(--text-sm);margin-top:var(--space-xs)}.search-result-meta{color:var(--color-text-tertiary);font-size:var(--text-xs);margin-top:var(--space-xs)}[data-theme=dark] .search-results{background-color:var(--color-bg-tertiary);border-color:var(--color-border-secondary)}[data-theme=dark] .search-result-item:hover{background-color:rgba(255,255,255,.08);border-color:var(--color-primary)}[data-theme=dark] .search-nav-btn{background-color:var(--color-bg-secondary);border-color:var(--color-border-secondary)}[data-theme=dark] .search-nav-btn:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-focus)}@media (max-width:768px){.search-results{flex-direction:column;gap:var(--space-sm);align-items:flex-start}.search-navigation{width:100%;justify-content:center}}.search-panel{background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);padding:var(--space-lg);margin-top:var(--space-md);box-shadow:var(--shadow-lg)}.search-panel input[type=text]{width:100%;padding:var(--space-md);padding-left:2.5rem;background-color:var(--color-bg-primary);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--text-base);transition:all var(--transition-fast)}.search-panel input[type=text]:focus{outline:0;border-color:var(--color-border-focus);box-shadow:0 0 0 3px rgba(147,51,234,.1)}.search-panel .search-result{display:block;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-xs);background-color:var(--color-bg-card);border:1px solid var(--color-border-primary);border-radius:var(--radius-md);color:var(--color-text-primary);text-decoration:none;transition:all var(--transition-fast)}.search-panel .search-result:hover{background-color:var(--color-bg-secondary);border-color:var(--color-primary);transform:translateX(4px)}.search-panel a,.search-panel a:link,.search-panel a:visited{color:var(--color-text-primary)!important;text-decoration:none}.search-panel a:hover{color:var(--color-text-primary)!important;text-decoration:none}.search-panel a:focus{color:var(--color-text-primary)!important;outline:2px solid var(--color-border-focus);outline-offset:2px}.search-panel .badge,.search-panel .format-tag,.search-panel .tag{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-tertiary);color:var(--color-text-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;text-decoration:none;margin-right:var(--space-xs);margin-bottom:var(--space-xs)}.search-panel .badge:hover,.search-panel .format-tag:hover,.search-panel .tag:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:translateY(-1px)}.search-panel .result-title{color:var(--color-text-primary);font-weight:500;font-size:var(--text-base);margin-bottom:var(--space-xs)}.search-panel .result-description{color:var(--color-text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-xs)}.search-panel .result-meta{color:var(--color-text-tertiary);font-size:var(--text-xs)}[data-theme=dark] .search-panel{background-color:var(--color-bg-secondary);border-color:var(--color-border-secondary)}[data-theme=dark] .search-panel input[type=text]{background-color:var(--color-bg-tertiary);border-color:var(--color-border-secondary);color:var(--color-text-primary)}[data-theme=dark] .search-panel input[type=text]:focus{border-color:var(--color-border-focus)}[data-theme=dark] .search-panel .search-result{background-color:var(--color-bg-tertiary);border-color:var(--color-border-secondary)}[data-theme=dark] .search-panel .search-result:hover{background-color:var(--color-bg-secondary)}[data-theme=dark] .search-panel a,[data-theme=dark] .search-panel a:focus,[data-theme=dark] .search-panel a:hover,[data-theme=dark] .search-panel a:link,[data-theme=dark] .search-panel a:visited{color:#fff!important}[data-theme=dark] .search-panel .badge,[data-theme=dark] .search-panel .format-tag,[data-theme=dark] .search-panel .tag{background-color:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}[data-theme=dark] .search-panel .badge:hover,[data-theme=dark] .search-panel .format-tag:hover,[data-theme=dark] .search-panel .tag:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}@media (max-width:768px){.search-panel{padding:var(--space-md);margin-top:var(--space-sm)}.search-panel input[type=text]{font-size:16px}}.badge,.format-tag,.search-tag,.tag{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);background-color:var(--color-bg-tertiary);color:var(--color-text-secondary);border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500;text-decoration:none;transition:all var(--transition-fast)}.badge:hover,.format-tag:hover,.search-tag:hover,.tag:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:translateY(-1px)}.format-tag.primary,.tag.primary{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.format-tag.secondary,.tag.secondary{background-color:var(--color-bg-secondary);color:var(--color-text-primary);border-color:var(--color-border-secondary)}.format-tag.success,.tag.success{background-color:#10b981;color:#fff;border-color:#10b981}.format-tag.warning,.tag.warning{background-color:#f59e0b;color:#fff;border-color:#f59e0b}.format-tag.error,.tag.error{background-color:#ef4444;color:#fff;border-color:#ef4444}[data-theme=dark] .badge,[data-theme=dark] .format-tag,[data-theme=dark] .search-tag,[data-theme=dark] .tag{background-color:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}[data-theme=dark] .badge:hover,[data-theme=dark] .format-tag:hover,[data-theme=dark] .search-tag:hover,[data-theme=dark] .tag:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}[data-theme=dark] .format-tag.secondary,[data-theme=dark] .tag.secondary{background-color:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.25)}.format-tag.small,.tag.small{padding:var(--space-xs) var(--space-xs);font-size:var(--text-xs)}.format-tag.large,.tag.large{padding:var(--space-sm) var(--space-md);font-size:var(--text-sm)}