*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:40px 20px}.container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;padding:40px;width:100%;max-width:1000px}.header{text-align:center;margin-bottom:30px}.header h1{color:#333;font-size:2.2em;margin-bottom:10px}.header p{color:#666;font-size:1.1em}.main-content{display:flex;flex-direction:column;gap:30px}.input-section{display:flex;flex-direction:column;gap:20px}.input-column{flex:1;display:flex;flex-direction:column}.input-column label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#333;font-weight:600;font-size:1em}.input-area{flex:1;width:100%;min-height:200px;padding:15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1em;resize:vertical;transition:all .3s;font-family:Consolas,Monaco,monospace}.input-area:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea33}.output-area{flex:1;width:100%;min-height:200px;padding:15px;border:2px solid #e0e0e0;border-radius:10px;font-size:1em;resize:vertical;background:#f8f9ff;font-family:Consolas,Monaco,monospace;word-break:break-all}.output-area:read-only{background:#f8f9ff}.button-section{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.btn{padding:15px 30px;border:none;border-radius:10px;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:10px}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 10px 20px #667eea66}.btn-success{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;box-shadow:0 10px 20px #11998e66}.btn-secondary{background:#fff;color:#dc3545;border:2px solid #dc3545}.btn-secondary:hover{background:#dc3545;color:#fff}.btn-warning{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;box-shadow:0 10px 20px #f5576c66}.btn-info{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;box-shadow:0 10px 20px #4facfe66}.copy-btn{background:none;border:none;color:#667eea;cursor:pointer;font-size:.9em;display:flex;align-items:center;gap:5px;transition:all .3s;padding:5px 10px;border-radius:5px}.copy-btn:hover{background:#667eea1a}.copy-btn.copied{color:#28a745}.stats{display:flex;gap:15px;margin-top:10px;flex-wrap:wrap;min-height:36px}.stat-item{background:#f0f0f0;padding:8px 15px;border-radius:20px;font-size:.85em;color:#666;min-width:80px;text-align:center}.stat-item span{font-weight:700;color:#667eea}.examples{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}.example-btn{padding:6px 12px;border:1px solid #667eea;background:#fff;color:#667eea;border-radius:15px;cursor:pointer;font-size:.85em;transition:all .3s}.example-btn:hover{background:#667eea;color:#fff}.arrow-section{display:flex;justify-content:center;padding:10px 0}.arrow-icon{font-size:1.5em;color:#667eea}@keyframes slideInCenter{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.alert{padding:15px 25px;border-radius:10px;display:none;animation:slideInCenter .3s ease;position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000;box-shadow:0 10px 30px #0003;max-width:90%;width:400px;text-align:center}.alert.show{display:block}.alert-success{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.alert-error{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.alert-info{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.info-section{margin-top:30px;padding:20px;background:#f8f9ff;border-radius:10px}.info-section h3{color:#333;margin-bottom:15px;font-size:1.2em}.info-section ul{color:#666;padding-left:20px}.info-section li{margin-bottom:8px;line-height:1.6}.switch{position:relative;display:inline-block;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:20px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#667eea}input:focus+.slider{box-shadow:0 0 1px #667eea}input:checked+.slider:before{transform:translate(20px)}.history-section{margin-top:10px;background:#f8f9ff;border:1px solid #e0e0e0;border-radius:8px;padding:15px}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.history-title{font-weight:600;color:#333;font-size:.95em}.toggle-history-btn{background:none;border:none;color:#667eea;font-size:.85em;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s;display:flex;align-items:center;gap:4px}.toggle-history-btn:hover{background:#667eea1a;color:#5a6fd8}.clear-history-btn{background:none;border:none;color:#667eea;font-size:.85em;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.clear-history-btn:hover{background:#667eea1a;color:#5a6fd8}.history-tags-container{overflow:hidden;max-height:60px;transition:max-height .3s ease}.history-tags-container.expanded{max-height:300px}.history-tags{display:flex;flex-wrap:wrap;gap:8px}.history-tag{background:#fff;border:1px solid #e0e0e0;border-radius:16px;padding:6px 12px;font-size:.85em;color:#333;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.history-tag:hover{border-color:#667eea;color:#667eea;background:#667eea0d;overflow:visible;white-space:normal;max-width:none;z-index:10;box-shadow:0 2px 8px #00000026}.history-tag-remove{font-size:.75em;opacity:.6}.history-tag-remove:hover{opacity:1}@media (max-width: 768px){.container{padding:20px}.header h1{font-size:1.8em}.input-section,.button-section{flex-direction:column}.btn{width:100%;justify-content:center}.stats{flex-direction:column}}#app{width:100%;display:flex;justify-content:center;align-items:flex-start}*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.relative{position:relative}.sticky{position:sticky}.after\:absolute:after{position:absolute}.after\:start-\[2px\]:after{inset-inline-start:2px}.after\:top-\[2px\]:after{top:2px}.\!mb-0{margin-bottom:0!important}.hidden{display:none}.h-5{height:1.25rem}.h1{height:.25rem}.h2{height:.5rem}.h3{height:.75rem}.w-10{width:2.5rem}.after\:h-4:after{height:1rem}.after\:w-4:after{width:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.flex-shrink{flex-shrink:1}.flex-wrap{flex-wrap:wrap}.peer:checked~.peer-checked\:after\:translate-x-full:after{--un-translate-x:100%;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}[dir=rtl] .peer:checked~.rtl\:peer-checked\:after\:-translate-x-full:after{--un-translate-x:-100%;transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.transform{transform:translate(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotate(var(--un-rotate-z)) skew(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.after\:border:after{border-width:1px}.peer:checked~.peer-checked\:after\:border-white:after{--un-border-opacity:1;border-color:rgb(255 255 255 / var(--un-border-opacity))}.after\:border-gray-300:after{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity))}.rounded-full{border-radius:9999px}.after\:rounded-full:after{border-radius:9999px}.bg-gray-200{--un-bg-opacity:1;background-color:rgb(229 231 235 / var(--un-bg-opacity))}.peer:checked~.peer-checked\:bg-green-500{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity))}.after\:bg-white:after{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity))}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-gray-500{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity))}.text-gray-600{--un-text-opacity:1;color:rgb(75 85 99 / var(--un-text-opacity))}.peer:focus~.peer-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:transition-all:after{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{content:""}.menu-container[data-v-ff024b18]{width:250px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a;padding:20px 0;height:calc(100vh - 80px);display:flex;flex-direction:column;position:sticky;top:40px}.menu-header[data-v-ff024b18]{padding:0 20px 20px;border-bottom:1px solid #e0e0e0}.menu-header h2[data-v-ff024b18]{color:#333;font-size:1.2em;margin:0;font-weight:600}.menu-nav[data-v-ff024b18]{flex:1;overflow-y:auto}.menu-list[data-v-ff024b18]{list-style:none;padding:0;margin:0}.menu-item[data-v-ff024b18]{display:flex;align-items:center;gap:10px;padding:12px 20px;cursor:pointer;transition:all .3s;border-radius:8px;margin:4px 12px;color:#666;font-weight:500}.menu-item[data-v-ff024b18]:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translate(4px)}.menu-item.active[data-v-ff024b18]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #667eea4d}.menu-icon[data-v-ff024b18]{font-size:1.1em;width:20px;text-align:center}.menu-label[data-v-ff024b18]{font-size:.95em}.menu-footer[data-v-ff024b18]{padding:20px;border-top:1px solid #e0e0e0;margin-top:auto}.menu-version[data-v-ff024b18]{text-align:center;font-size:.85em;color:#999}.menu-nav[data-v-ff024b18]::-webkit-scrollbar{width:6px}.menu-nav[data-v-ff024b18]::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.menu-nav[data-v-ff024b18]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.menu-nav[data-v-ff024b18]::-webkit-scrollbar-thumb:hover{background:#a1a1a1}@media (max-width: 1024px){.menu-container[data-v-ff024b18]{width:200px;height:calc(100vh - 40px);margin:20px}}@media (max-width: 768px){.menu-container[data-v-ff024b18]{width:100%;height:auto;margin:0 0 20px;padding:10px 0;border-radius:12px 12px 0 0}.menu-nav[data-v-ff024b18]{overflow-y:visible}.menu-list[data-v-ff024b18]{display:flex;flex-wrap:wrap;gap:8px;padding:10px}.menu-item[data-v-ff024b18]{margin:0;padding:10px 16px;border-radius:8px;font-size:.9em}.menu-item[data-v-ff024b18]:hover{transform:none}.menu-footer[data-v-ff024b18]{display:none}}.app-container[data-v-1851d1b8]{display:flex;width:100%;max-width:1400px;gap:20px}.app-sidebar[data-v-1851d1b8]{flex-shrink:0}.app-main[data-v-1851d1b8]{flex:1;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;min-height:calc(100vh - 80px);overflow:hidden}@media (max-width: 768px){.app-container[data-v-1851d1b8]{flex-direction:column;gap:0}.app-sidebar[data-v-1851d1b8]{width:100%}.app-main[data-v-1851d1b8]{border-radius:0 0 12px 12px;min-height:auto;margin:0 20px 20px}}