.text-tools-container{max-width:800px;margin:2rem auto;padding:1rem;background:var(--bg-primary, #fff);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,0.1)}.overview-section{text-align:center;margin-bottom:3rem;padding-bottom:2rem;border-bottom:2px solid var(--primary-500, #3b82f6)}.overview-section h1{font-size:2.5rem;color:var(--primary-600, #2563eb);margin-bottom:1rem;font-weight:700}.overview-section .description{color:var(--text-secondary, #6b7280);font-size:1.1rem;line-height:1.6;margin-bottom:2rem}.tools-section{display:flex;flex-direction:column;gap:3rem}.tool-section{background:var(--bg-secondary, #f8fafc);border-radius:8px;padding:2rem;border:1px solid var(--border-primary, #e2e8f0)}.tool-section h2{color:var(--primary-700, #1d4ed8);font-size:1.5rem;margin-bottom:1.5rem;font-weight:600;display:flex;align-items:center;gap:0.5rem}.section-spacer{height:3rem}.tools-navigation{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:1rem;margin-top:2rem}.nav-tool-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:white;border:2px solid var(--border-primary, #e2e8f0);border-radius:8px;text-decoration:none;color:inherit;transition:all 0.2s ease}.nav-tool-card:hover{border-color:var(--primary-400, #60a5fa);background:var(--primary-25, #f8faff);transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,0.15)}.nav-tool-card:active{transform:translateY(0)}.nav-tool-card.active{border-color:var(--primary-500, #3b82f6);background:var(--primary-100, #dbeafe);box-shadow:0 4px 12px rgba(59,130,246,0.25)}.nav-tool-card.active .nav-icon{background:var(--primary-200, #bfdbfe);transform:scale(1.1)}.nav-icon{font-size:2rem;flex-shrink:0;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background:var(--primary-50, #eff6ff);border-radius:50%;border:1px solid var(--primary-200, #bfdbfe)}.nav-content{flex:1}.nav-content h3{margin:0 0 0.25rem 0;font-size:1rem;font-weight:600;color:var(--primary-700, #1d4ed8)}.nav-content p{margin:0;font-size:0.85rem;color:var(--text-secondary, #6b7280);line-height:1.3}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:0.5rem;font-weight:500;color:var(--text-primary, #1f2937);font-size:0.9rem}.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.75rem;border:1px solid var(--border-secondary, #d1d5db);border-radius:6px;font-size:1rem;background:white;transition:border-color 0.2s ease}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary-500, #3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.form-group textarea{min-height:120px;resize:vertical;font-family:'Courier New', monospace;line-height:1.5}.form-group select{cursor:pointer;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 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 0.75rem center;background-repeat:no-repeat;background-size:16px 16px;padding-right:2.5rem}.radio-group{display:flex;flex-direction:column;gap:1rem;margin-top:0.5rem}.radio-option{display:flex;align-items:center;gap:1rem;padding:1rem;border:2px solid var(--border-secondary, #d1d5db);border-radius:8px;background:white;cursor:pointer;transition:all 0.2s ease}.radio-option:hover{border-color:var(--primary-300, #93c5fd);background:var(--primary-25, #f8faff)}.radio-option:has(.radio-input-hidden:checked){border-color:var(--primary-500, #3b82f6);background:var(--primary-50, #eff6ff);box-shadow:0 0 0 1px var(--primary-500, #3b82f6)}.radio-input-hidden{position:absolute;opacity:0;width:0;height:0;margin:0;cursor:pointer}.radio-label{flex:1;cursor:pointer}.radio-label strong{color:var(--text-primary, #1f2937);font-size:1rem;display:block;margin-bottom:0.25rem}.radio-label small{color:var(--text-secondary, #6b7280);font-size:0.85rem;line-height:1.4}.form-hint{display:block;margin-top:0.5rem;font-size:0.8rem;color:var(--text-tertiary, #9ca3af);font-style:italic}.btn{display:inline-block;padding:0.75rem 2rem;background:var(--primary-600, #2563eb);color:white;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;text-decoration:none}.btn:hover{background:var(--primary-700, #1d4ed8);transform:translateY(-1px)}.btn:active{transform:translateY(0)}.result-box{margin-top:2rem;background:white;border:1px solid var(--border-primary, #e2e8f0);border-radius:8px;padding:1.5rem}.result-box h3{color:var(--primary-600, #2563eb);margin-bottom:1rem;font-size:1.2rem;display:flex;align-items:center;justify-content:space-between}.result-box pre{background:var(--bg-tertiary, #f1f5f9);border:1px solid var(--border-secondary, #d1d5db);border-radius:4px;padding:1rem;white-space:pre-wrap;word-wrap:break-word;font-family:'Courier New', monospace;font-size:0.9rem;line-height:1.4;max-height:300px;overflow-y:auto}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1rem}.stat-item{background:white;border:1px solid var(--border-primary, #e2e8f0);border-radius:6px;padding:1rem;text-align:center}.stat-item .stat-label{font-size:0.85rem;color:var(--text-secondary, #6b7280);margin-bottom:0.5rem;display:block}.stat-item .stat-value{font-size:1.5rem;font-weight:700;color:var(--primary-600, #2563eb);display:block}.regex-examples{margin-bottom:1.5rem}.regex-examples h4{margin-bottom:0.75rem;color:var(--text-primary, #1f2937);font-size:1rem}.regex-example-buttons{display:flex;flex-wrap:wrap;gap:0.5rem}.regex-example-btn{background:var(--bg-tertiary, #f1f5f9);border:1px solid var(--border-secondary, #d1d5db);border-radius:4px;padding:0.5rem 1rem;font-size:0.85rem;cursor:pointer;transition:all 0.2s ease}.regex-example-btn:hover{background:var(--primary-50, #eff6ff);border-color:var(--primary-300, #93c5fd);color:var(--primary-700, #1d4ed8)}.winmerge-container{margin-top:1rem;border:1px solid var(--border-primary, #e2e8f0);border-radius:6px;overflow:hidden}.winmerge-header{display:grid;grid-template-columns:1fr 60px 1fr;background:var(--bg-tertiary, #f1f5f9);border-bottom:1px solid var(--border-primary, #e2e8f0)}.winmerge-left-header,.winmerge-right-header{padding:0.75rem;font-size:0.9rem;font-weight:600;text-align:center;border-right:1px solid var(--border-primary, #e2e8f0)}.winmerge-right-header{border-right:none;border-left:1px solid var(--border-primary, #e2e8f0)}.winmerge-center-header{background:var(--bg-tertiary, #f1f5f9)}.winmerge-content{max-height:400px;overflow-y:auto;font-family:'Courier New', monospace;font-size:0.85rem}.winmerge-row{display:grid;grid-template-columns:1fr 60px 1fr;border-bottom:1px solid var(--border-secondary, #d1d5db)}.winmerge-left,.winmerge-right{padding:0.5rem;border-right:1px solid var(--border-secondary, #d1d5db);min-height:32px}.winmerge-left .line-number,.winmerge-right .line-number{color:var(--text-tertiary, #9ca3af);margin-right:0.5rem;font-size:0.8rem}.winmerge-right{border-right:none;border-left:1px solid var(--border-secondary, #d1d5db)}.winmerge-center{display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary, #f1f5f9);border-left:1px solid var(--border-secondary, #d1d5db);border-right:1px solid var(--border-secondary, #d1d5db)}.winmerge-added{background:rgba(34,197,94,0.1)}.winmerge-added .line-number{color:#059669;font-weight:600}.winmerge-deleted{background:rgba(239,68,68,0.1)}.winmerge-deleted .line-number{color:#dc2626;font-weight:600}.winmerge-modified{background:rgba(245,158,11,0.1)}.winmerge-modified .line-number{color:#d97706;font-weight:600}.winmerge-unchanged{background:white}.winmerge-missing{background:rgba(156,163,175,0.1)}.winmerge-missing .empty-line{font-style:italic;opacity:0.6;color:var(--text-tertiary, #9ca3af)}.char-diff-old{background:rgba(239,68,68,0.3);padding:1px 2px;border-radius:2px;font-weight:600}.char-diff-new{background:rgba(34,197,94,0.3);padding:1px 2px;border-radius:2px;font-weight:600}.diff-arrow-right{color:#059669;font-size:0.85rem}.diff-arrow-left{color:#dc2626;font-size:0.85rem}.diff-arrow-both{color:#d97706;font-size:0.85rem}.winmerge-left .line-content,.winmerge-right .line-content{flex:1;word-break:break-all;white-space:pre-wrap;font-family:'Courier New', monospace}.diff-stats{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.diff-stats .stat-item{background:var(--primary-50, #eff6ff);color:var(--primary-700, #1d4ed8);padding:0.5rem 1rem;border-radius:4px;font-size:0.85rem;font-weight:500}.copy-icon{color:var(--primary-600, #2563eb);cursor:pointer;padding:0.5rem;border-radius:4px;transition:all 0.2s ease}.copy-icon:hover{background:var(--primary-50, #eff6ff);color:var(--primary-700, #1d4ed8)}.copy-icon.success{color:var(--success, #10b981)}.toast{position:fixed;top:20px;right:20px;background:var(--success, #10b981);color:white;padding:1rem 1.5rem;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1000;opacity:0;transform:translateX(100%);transition:all 0.3s ease}.toast.show{opacity:1;transform:translateX(0)}textarea.warning{border-color:var(--warning, #f59e0b);box-shadow:0 0 0 3px rgba(245,158,11,0.1)}.hidden{display:none}@media (max-width: 768px){.text-tools-container{margin:1rem;padding:1rem}.overview-section h1{font-size:2rem}.section-spacer{height:2rem}.tools-navigation{grid-template-columns:1fr;gap:0.75rem}.nav-tool-card{padding:0.75rem}.nav-tool-card .nav-icon{width:2.5rem;height:2.5rem;font-size:1.5rem}.nav-tool-card .nav-content h3{font-size:0.9rem}.nav-tool-card .nav-content p{font-size:0.8rem}.tool-section{padding:1.5rem}.stats-grid{grid-template-columns:1fr}.winmerge-header{grid-template-columns:1fr}.winmerge-header .winmerge-left-header:first-child{border-bottom:1px solid var(--border-primary, #e2e8f0)}.winmerge-header .winmerge-right-header,.winmerge-header .winmerge-center-header{display:none}.winmerge-row{grid-template-columns:1fr}.winmerge-left,.winmerge-right{border-right:none;border-left:none}.winmerge-center{display:none}.btn{width:100%}.toast{left:20px;right:20px;transform:translateY(-100%)}.toast.show{transform:translateY(0)}}@media (max-width: 480px){.regex-example-buttons{justify-content:center}.regex-example-btn{flex:1;text-align:center;min-width:80px}}