.tool-container{display:flex;gap:30px;margin:40px 0}.tool-main{flex-grow:1}@media (max-width:992px){.tool-main{grid-template-columns:1fr}.tool-container{flex-direction:column}}.how-to-use{margin-top:50px}.steps{margin-top:20px}.step{display:flex;gap:15px;margin-bottom:20px}.step-number{width:30px;height:30px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700}.step-content h4{margin-bottom:5px}.step-content p{color:var(--gray)}.tool-card{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-light);border-radius:var(--card-radius);padding:24px 28px;box-shadow:var(--shadow-card);transition:var(--transition);margin-bottom:20px}.tool-card:hover{box-shadow:var(--shadow-hover);background:var(--bg-card-hover)}.dark-mode .tool-card{background:var(--card-bg);border-color:var(--light-gray)}.tool-card .tool-title{font-size:1.75rem;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:12px}.tool-card .tool-title i{color:var(--primary)}.tool-card .tool-subtitle{color:var(--gray);font-size:0.95rem;margin-bottom:20px}.tool-label{display:block;font-weight:600;margin-bottom:8px;color:var(--text);font-size:0.95rem}.tool-label i{margin-right:8px;color:var(--primary)}.tool-label .badge{font-size:0.7rem;background:var(--primary);color:#fff;padding:2px 10px;border-radius:20px;margin-left:8px}.tool-textarea{width:100%;min-height:180px;padding:14px 16px;border:2px solid var(--light-gray);border-radius:var(--card-radius);background:var(--body-bg);color:var(--text);font-family:'Courier New', Courier, monospace;font-size:14px;line-height:1.7;resize:vertical;transition:var(--transition)}.tool-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(37, 99, 235, 0.1)}.tool-textarea::placeholder{color:var(--gray)}.tool-input{width:100%;padding:10px 14px;border:2px solid var(--light-gray);border-radius:10px;background:var(--body-bg);color:var(--text);font-size:14px;transition:var(--transition)}.tool-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(37, 99, 235, 0.1)}.tool-input::placeholder{color:var(--gray)}.tool-select{width:100%;padding:10px 14px;border:2px solid var(--light-gray);border-radius:10px;background:var(--body-bg);color:var(--text);font-size:14px;cursor:pointer;transition:var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.tool-select:focus{outline:none;border-color:var(--primary)}.tool-output{background:var(--card-bg);border:2px solid var(--light-gray);border-radius:var(--card-radius);padding:14px 16px;font-family:'Courier New', Courier, monospace;font-size:14px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere; word-break:break-word; min-height:180px;max-height:400px;overflow-y:auto;color:var(--text);transition:var(--transition);position:relative}.tool-output-empty{color:var(--gray);font-style:italic}.tool-output .copy-btn{position:absolute;top:8px;right:8px;background:var(--primary);color:#fff;border:none;padding:4px 14px;border-radius:8px;font-size:12px;cursor:pointer;transition:var(--transition);z-index:1}.tool-output .copy-btn:hover{background:var(--primary-dark);transform:scale(1.05)}.tool-output .copy-btn.copied{background:var(--secondary)}.tool-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tool-grid-3{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}.tool-grid-auto{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;border:none;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;transition:var(--transition);text-decoration:none;min-width:120px}.btn:active{transform:scale(0.96)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--secondary);box-shadow:0 4px 12px rgba(37, 99, 235, 0.3)}.btn-secondary{background:var(--secondary);color:#fff}.btn-secondary:hover{opacity:0.85;box-shadow:0 4px 12px rgba(65, 197, 48, 0.3)}.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{opacity:0.85;box-shadow:0 4px 12px rgba(76, 201, 240, 0.3)}.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}.btn-ghost{background:transparent;color:var(--text);border:2px solid var(--light-gray)}.btn-ghost:hover{background:var(--light-gray)}.btn-sm{padding:6px 14px;font-size:12px;min-width:unset}.btn-lg{padding:14px 32px;font-size:16px}.btn-success{background:linear-gradient(135deg, #28a745, #218838) !important;border-color:#1e7e34 !important;color:white !important}.tool-actions{display:flex;gap:12px;justify-content:center;margin:20px 0;flex-wrap:wrap}.tool-swap-btn{background:var(--light-gray);border:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);color:var(--text);font-size:18px;margin:10px auto;box-shadow:var(--shadow-card)}.tool-swap-btn:hover{background:var(--primary);color:#fff;transform:rotate(180deg);box-shadow:var(--shadow-hover)}.tool-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:14px;margin-top:16px}.tool-stat{background:var(--light-gray);padding:14px 18px;border-radius:var(--card-radius);text-align:center;transition:var(--transition)}.tool-stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}.tool-stat-value{font-size:1.8rem;font-weight:700;color:var(--primary);line-height:1.2}.tool-stat-label{font-size:0.8rem;color:var(--gray);margin-top:4px;text-transform:uppercase;letter-spacing:0.5px}.tool-stat.green .tool-stat-value{color:var(--secondary)}.tool-stat.red .tool-stat-value{color:#ef4444}.tool-stat.blue .tool-stat-value{color:var(--primary)}.tool-stat.purple .tool-stat-value{color:var(--primary-dark)}.tool-stat.orange .tool-stat-value{color:#f59e0b}.tool-stat.accent .tool-stat-value{color:var(--accent)}.tool-item{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--light-gray);border-radius:10px;transition:var(--transition);flex-wrap:wrap}.tool-item:hover{transform:translateX(4px);box-shadow:var(--shadow-card)}.tool-item-label{font-weight:700;color:var(--primary);min-width:100px;font-size:13px}.tool-item-value{flex:1;font-family:'Courier New', Courier, monospace;font-size:13px;word-break:break-all;color:var(--text);min-width:120px}.tool-item-meta{font-size:12px;color:var(--gray);white-space:nowrap}.tool-item .copy-btn{background:transparent;border:1px solid var(--primary);color:var(--primary);padding:3px 12px;border-radius:8px;cursor:pointer;font-size:12px;transition:var(--transition)}.tool-item .copy-btn:hover{background:var(--primary);color:#fff}.tool-item .copy-btn.copied{background:var(--secondary);border-color:var(--secondary);color:#fff}.tool-range{display:flex;align-items:center;gap:14px;margin:10px 0}.tool-range input[type="range"]{flex:1;height:6px;border-radius:3px;background:var(--light-gray);accent-color:var(--primary);cursor:pointer;transition:var(--transition)}.tool-range input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;transition:var(--transition)}.tool-range input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}.tool-range input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:none}.tool-range-value{font-size:1.3rem;font-weight:700;color:var(--primary);min-width:40px;text-align:center}.tool-result{margin-top:12px;padding:12px 16px;border-radius:10px;font-weight:600;display:flex;align-items:center;gap:10px}.tool-result.success{background:rgba(65, 197, 48, 0.1);color:var(--secondary);border:1px solid var(--secondary)}.tool-result.error{background:rgba(239, 68, 68, 0.1);color:#ef4444;border:1px solid #ef4444}.tool-result.warning{background:rgba(245, 158, 11, 0.1);color:#f59e0b;border:1px solid #f59e0b}.tool-result.info{background:rgba(76, 201, 240, 0.1);color:var(--accent);border:1px solid var(--accent)}.tool-tips{margin-top:14px;padding:14px 18px;background:var(--card-bg);border-left:4px solid var(--primary);border-radius:var(--card-radius);box-shadow:var(--shadow-card)}.tool-tips ul{margin:6px 0 0 20px;font-size:13px;color:var(--text)}.tool-tips ul li{margin-bottom:4px}.tool-tips code{background:var(--body-bg);padding:2px 8px;border-radius:4px;font-size:12px;color:var(--primary)}.tool-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.tool-tab{cursor:pointer;padding:12px 20px;text-align:center;border-radius:var(--card-radius);border:2px solid var(--light-gray);background:transparent;transition:var(--transition)}.tool-tab:hover:not(.active){background:var(--light-gray);border-color:var(--primary-light)}.tool-tab.active{background:var(--primary);color:#fff}.diff-line{display:flex;padding:3px 10px;font-family:'Courier New', Courier, monospace;font-size:13px;line-height:1.7;border-bottom:1px solid var(--light-gray);transition:var(--transition)}.diff-line:last-child{border-bottom:none}.diff-line .line-num{display:inline-block;min-width:36px;padding-right:12px;color:var(--gray);text-align:right;user-select:none;opacity:0.5;font-size:11px}.diff-line .line-content{flex:1;white-space:pre-wrap;word-wrap:break-word;padding-left:8px}.diff-line.equal{background:transparent}.diff-line.equal .line-content{color:var(--text)}.diff-line.deleted{background:rgba(239, 68, 68, 0.1)}.diff-line.deleted .line-content{color:#ef4444}.diff-line.inserted{background:rgba(65, 197, 48, 0.1)}.diff-line.inserted .line-content{color:var(--secondary)}.pw-strength{margin-top:12px;padding:12px 16px;border-radius:var(--card-radius);display:flex;align-items:center;gap:14px;flex-wrap:wrap;transition:var(--transition)}.pw-strength .bar{flex:1;min-width:80px;height:8px;background:var(--light-gray);border-radius:4px;overflow:hidden}.pw-strength .bar .fill{height:100%;border-radius:4px;transition:width 0.5s ease}.pw-strength .label{font-weight:700;font-size:14px;min-width:70px}.pw-strength .icon{font-size:1.2rem}.pw-weak .fill{background:#ef4444}.pw-weak .label{color:#ef4444}.pw-fair .fill{background:#f59e0b}.pw-fair .label{color:#f59e0b}.pw-good .fill{background:var(--primary)}.pw-good .label{color:var(--primary)}.pw-strong .fill{background:var(--secondary)}.pw-strong .label{color:var(--secondary)}.flex{display:flex; justify-content:center}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-muted{color:var(--gray)}.text-success{color:var(--secondary)}.text-danger{color:#ef4444}.text-warning{color:#f59e0b}.text-primary{color:var(--primary)}.text-sm{font-size:14px}.text-xs{font-size:12px}.text-lg{font-size:18px}.font-mono{font-family:'Courier New', Courier, monospace}.font-bold{font-weight:800}.font-semibold{font-weight:600}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.w-full{width:100%}.w-ha{width:50%}.w-auto{width:auto}.h-full{height:100%}.relative{position:relative}.absolute{position:absolute}.rounded{border-radius:10px}.rounded-full{border-radius:50%}.shadow{box-shadow:var(--shadow-card)}.shadow-hover{box-shadow:var(--shadow-hover)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-auto{overflow-x:auto}.bg-card{background:var(--card-bg)}.bg-body{background:var(--body-bg)}.bg-light{background:var(--light-gray)}.border{border:1px solid var(--light-gray)}.border-primary{border-color:var(--primary)}.border-success{border-color:var(--secondary)}.border-danger{border-color:#ef4444}@media (max-width:992px){.tool-grid-2{grid-template-columns:1fr}.tool-grid-3{grid-template-columns:1fr 1fr}.tool-swap-btn{transform:rotate(90deg)}.tool-swap-btn:hover{transform:rotate(270deg)}}@media (max-width:768px){.tool-container{padding:12px}.tool-card{padding:16px 18px}.tool-card .tool-title{font-size:1.3rem}.tool-actions{flex-direction:column;align-items:center}.tool-actions .btn{width:100%;max-width:280px}.tool-grid-2,.tool-grid-3{grid-template-columns:1fr}.tool-grid-auto{grid-template-columns:1fr}.tool-stats{grid-template-columns:repeat(2, 1fr);gap:10px}.tool-stat{padding:10px 12px}.tool-stat-value{font-size:1.3rem}.tool-textarea{min-height:140px;font-size:13px;padding:10px 12px}.tool-output{font-size:13px;padding:10px 12px;min-height:140px;max-height:400px}.tool-item{flex-direction:column;align-items:stretch;gap:6px}.tool-item-label{min-width:unset;font-size:12px}.tool-item-value{font-size:12px;min-width:unset}.tool-item .copy-btn{width:100%}.diff-line{font-size:11px;padding:2px 6px}.diff-line .line-num{min-width:28px;font-size:10px;padding-right:6px}.tool-range{flex-wrap:wrap}.pw-strength{flex-direction:column;align-items:stretch}.tool-output .copy-btn{position:static;margin-top:8px;width:100%}}@media (max-width:480px){.tool-stats{grid-template-columns:1fr 1fr;gap:8px}.tool-stat{padding:8px 10px}.tool-stat-value{font-size:1.1rem}.tool-stat-label{font-size:0.7rem}.tool-card{padding:12px 14px}.btn{font-size:13px;padding:8px 16px;min-width:100px}}.dark-mode .tool-card{background:var(--card-bg);border-color:var(--light-gray)}.dark-mode .tool-card:hover{background:var(--card-bg)}.dark-mode .tool-textarea,.dark-mode .tool-input,.dark-mode .tool-select{background:var(--card-bg);border-color:var(--light-gray);color:var(--text)}.dark-mode .tool-output{background:var(--card-bg);border-color:var(--light-gray)}.dark-mode .tool-stat{background:var(--card-bg)}.dark-mode .tool-item{background:var(--card-bg)}.dark-mode .tool-tips{background:var(--card-bg)}.dark-mode .tool-result.success{background:rgba(65, 197, 48, 0.15)}.dark-mode .tool-result.error{background:rgba(239, 68, 68, 0.15)}.dark-mode .tool-result.warning{background:rgba(245, 158, 11, 0.15)}.dark-mode .diff-line.deleted{background:rgba(239, 68, 68, 0.15)}.dark-mode .diff-line.inserted{background:rgba(65, 197, 48, 0.15)}.dark-mode .pw-strength{background:var(--card-bg)}.hide{display:none}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.7);z-index:9999;align-items:center;justify-content:center;flex-direction:column}.loading-overlay .loading{text-align:center}.loading-overlay .loading i{font-size:3rem;color:#fff}.loading-overlay .loading p{color:#fff;margin-top:12px}.upload-area{border:2px dashed var(--light-gray);border-radius:var(--card-radius);padding:40px 20px;text-align:center;transition:var(--transition);cursor:pointer}.upload-icon{font-size:3rem;color:var(--primary);margin-bottom:10px}.upload-area h3{color:var(--text);margin-bottom:6px}.upload-area:hover,.upload-area.dragover{border-color:var(--primary) !important;background:rgba(37, 99, 235, 0.05)}.image-preview{background:var(--body-bg);border-radius:var(--card-radius);padding:12px;min-height:150px;display:flex;align-items:center;justify-content:center}.image-preview img{max-width:100%;max-height:300px;object-fit:contain;border-radius:4px}.progress-container{margin-top:12px;padding:12px 16px;background:var(--light-gray);border-radius:var(--card-radius)}.progress-track{background:var(--light-gray);height:8px;border-radius:4px;overflow:hidden}.progress-bar{width:0%;height:100%;background:var(--primary);transition:width 0.3s ease}.preview-container{margin-top:16px}.ocr-language-tips{border-left-color:var(--accent) !important;background:var(--light-gray) !important}.ocr-language-label{font-size:13px;margin-bottom:4px}.ocr-language-select{max-width:320px}.ocr-output-area{font-family:var(--font-mono);font-size:13px;min-height:200px;max-height:350px}.dark-mode .upload-area{border-color:var(--light-gray)}.dark-mode .upload-area:hover{background:rgba(76, 201, 240, 0.05)}.dark-mode .image-preview,.dark-mode .progress-container{background:var(--card-bg)}@media (max-width:768px){.upload-area{padding:20px 16px}.upload-icon{font-size:2rem}.upload-area h3{font-size:1rem}.tool-actions{flex-direction:column}.tool-actions .btn{width:100%}}