.encryption-tool{padding:20px}.encryption-tool .tool-header{text-align:center;margin-bottom:30px}.encryption-tool .tool-header h2{margin:0 0 10px;color:#333;font-size:28px}.encryption-tool .tool-header p{margin:0;color:#666;font-size:14px}.encryption-container{display:grid;grid-template-columns:250px 1fr;gap:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.encryption-sidebar{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;color:#fff}.encryption-sidebar h3{margin:0 0 20px;font-size:18px;font-weight:600}.mode-list{display:flex;flex-direction:column;gap:8px}.mode-item{display:flex;align-items:center;gap:10px;padding:12px;background:#ffffff1a;border:none;border-radius:8px;color:#fff;cursor:pointer;transition:all .3s;text-align:left;width:100%}.mode-item:hover{background:#fff3;transform:translate(5px)}.mode-item.active{background:#fff;color:#667eea;font-weight:600}.mode-icon{font-size:20px}.mode-name{flex:1;font-size:14px}.mode-desc{font-size:12px;opacity:.8}.encryption-main{padding:25px}.key-input{margin-bottom:20px;padding:15px;background:#f8f9fa;border-radius:8px;display:flex;align-items:center;gap:10px}.key-input label{font-weight:600;color:#333;white-space:nowrap}.key-input input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px}.key-input input:focus{outline:none;border-color:#667eea}.action-toggle{display:flex;gap:10px;margin-bottom:20px}.action-btn{flex:1;padding:12px 20px;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;font-size:14px;font-weight:500;color:#495057;cursor:pointer;transition:all .3s}.action-btn:hover{background:#e9ecef}.action-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff}.input-area,.output-area{margin-bottom:20px}.area-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.area-header label{font-weight:600;color:#333}.char-count{font-size:12px;color:#999}.text-input{width:100%;min-height:150px;padding:12px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;transition:border-color .3s}.text-input:focus{outline:none;border-color:#667eea}.output-content{min-height:150px;max-height:300px;padding:15px;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;font-size:14px;font-family:Courier New,monospace;word-break:break-all;overflow-y:auto;white-space:pre-wrap}.button-group{display:flex;gap:10px;flex-wrap:wrap}.btn-primary,.btn-secondary,.btn-danger{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;flex:1;min-width:120px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-secondary{background:#28a745;color:#fff;min-width:120px}.btn-secondary:hover{background:#218838;transform:translateY(-2px);box-shadow:0 4px 12px #28a74566}.btn-danger{background:#dc3545;color:#fff;min-width:120px}.btn-danger:hover{background:#c82333;transform:translateY(-2px);box-shadow:0 4px 12px #dc354566}@media (max-width: 768px){.encryption-container{grid-template-columns:1fr}.encryption-sidebar{max-height:300px;overflow-y:auto}.mode-item{padding:10px}.button-group{flex-direction:column}.btn-primary,.btn-secondary,.btn-danger{width:100%}}.loan-calculator{padding:20px}.loan-calculator .tool-header{text-align:center;margin-bottom:30px}.loan-calculator .tool-header h2{margin:0 0 10px;color:#333;font-size:28px}.loan-calculator .tool-header p{margin:0;color:#666;font-size:14px}.loan-input{width:100%;padding:12px 15px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;transition:all .3s}.loan-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.unit{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#999;font-size:14px;pointer-events:none}.term-input{display:flex;gap:10px}.term-input .loan-input{flex:1}.term-select{padding:12px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:all .3s}.term-select:focus{outline:none;border-color:#667eea}.repayment-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.repayment-option{display:flex;align-items:center;gap:12px;padding:15px;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .3s;text-align:left}.repayment-option:hover{border-color:#667eea;background:#667eea0d}.repayment-option.active{border-color:#667eea;background:#667eea1a}.option-icon{font-size:24px}.option-content{display:flex;flex-direction:column;gap:4px}.option-name{font-weight:600;color:#333;font-size:14px}.option-desc{font-size:12px;color:#666}.btn-calculate,.btn-clear,.btn-export{flex:1;padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.result-summary{margin-bottom:25px}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:20px}.summary-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:20px;border-radius:12px;border:2px solid #e9ecef;display:flex;align-items:center;gap:15px;transition:all .3s}.summary-card.interest{background:linear-gradient(135deg,#ffc1071a,#ff98001a);border-color:#ffc107}.card-icon{font-size:32px;flex-shrink:0}.card-value{font-size:18px;font-weight:700;color:#333}.summary-card.interest .card-value{color:#ffc107}.btn-export{width:100%;background:#28a745;color:#fff}.btn-export:hover{background:#218838;transform:translateY(-2px);box-shadow:0 4px 12px #28a74566}.schedule-section{margin-top:25px}.schedule-section h3{margin:0 0 15px;color:#333;font-size:18px;font-weight:600}.schedule-table{border:2px solid #e9ecef;border-radius:8px;overflow:hidden;max-height:400px;overflow-y:auto}.table-header{display:grid;grid-template-columns:60px 1fr 1fr 1fr 1fr;gap:10px;padding:12px 15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;position:sticky;top:0;z-index:1}.table-row{display:grid;grid-template-columns:60px 1fr 1fr 1fr 1fr;gap:10px;padding:12px 15px;border-bottom:1px solid #e9ecef;transition:background .2s}.col-month{font-weight:600;color:#667eea}.col-payment{color:#333;font-weight:500}.col-principal{color:#28a745}.col-interest{color:#ffc107}.col-remaining{color:#666}.info-card{background:linear-gradient(135deg,#667eea08,#764ba208);padding:20px;border-radius:12px;border:2px solid rgba(102,126,234,.1)}.comparison{display:flex;flex-direction:column;gap:15px}.compare-item{padding:15px;background:#fff;border-radius:8px;border:2px solid #e9ecef}.compare-item strong{display:block;margin-bottom:8px;color:#667eea;font-size:14px}.compare-item p{margin:0;color:#666;font-size:13px;line-height:1.6}@media (max-width: 768px){.summary-cards{grid-template-columns:1fr 1fr}.table-header,.table-row{grid-template-columns:50px .8fr .8fr .8fr .8fr;font-size:12px;padding:10px}.repayment-options{grid-template-columns:1fr}.button-group{flex-direction:column}}@media (max-width: 480px){.summary-cards{grid-template-columns:1fr}.table-header,.table-row{grid-template-columns:40px .7fr .7fr .7fr;font-size:11px}.col-remaining{display:none}}.tax-calculator{padding:20px}.tax-calculator .tool-header{text-align:center;margin-bottom:30px}.tax-calculator .tool-header h2{margin:0 0 10px;color:#333;font-size:28px}.tax-calculator .tool-header p{margin:0;color:#666;font-size:14px}.calculator-container{display:grid;grid-template-columns:1fr;gap:20px}.input-section,.result-section{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 8px #0000001a}.input-group{margin-bottom:20px}.input-group label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600;color:#333;font-size:14px}.tax-input,.deduction-input{width:100%;padding:12px 15px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;transition:all .3s}.tax-input:focus,.deduction-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.input-group{position:relative}.period-input{display:flex;gap:10px}.period-input .tax-input{flex:1}.period-select{padding:12px 15px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:all .3s}.period-select:focus{outline:none;border-color:#667eea}.period-label{display:flex;align-items:center;color:#999;font-size:14px;padding:0 15px}.special-deductions{margin:25px 0;padding:20px;background:linear-gradient(135deg,#667eea08,#764ba208);border-radius:12px;border:2px solid rgba(102,126,234,.1)}.special-deductions h3{margin:0 0 15px;color:#333;font-size:16px;font-weight:600}.deductions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px}.deduction-item{display:flex;flex-direction:column;gap:8px;position:relative}.deduction-item label{font-size:13px;font-weight:500;color:#333}.deduction-item .unit{position:absolute;right:40px;top:45px;color:#999;font-size:12px;pointer-events:none}.deduction-input{padding:10px 40px 10px 12px}.btn-calculate,.btn-clear{flex:1;padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-calculate{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-calculate:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-clear:hover{background:#c82333;transform:translateY(-2px);box-shadow:0 4px 12px #dc354566}.result-summary{margin-bottom:20px}.result-summary h3{margin:0 0 20px;color:#333;font-size:20px;font-weight:600}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-bottom:25px}.summary-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:18px;border-radius:12px;border:2px solid #e9ecef;display:flex;align-items:center;gap:12px;transition:all .3s}.summary-card:hover{transform:translateY(-3px);box-shadow:0 4px 15px #0000001a}.summary-card.highlight{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea}.summary-card.rate{background:linear-gradient(135deg,#ffc1071a,#ff98001a);border-color:#ffc107}.card-icon{font-size:28px;flex-shrink:0}.card-content{display:flex;flex-direction:column;gap:5px}.card-label{font-size:12px;color:#666}.card-value{font-size:16px;font-weight:700;color:#333}.summary-card.highlight .card-value{color:#667eea}.summary-card.rate .card-value{color:#ffc107}.result-details{margin-top:25px;padding:20px;background:linear-gradient(135deg,#667eea08,#764ba208);border-radius:12px;border:2px solid rgba(102,126,234,.1)}.result-details h4{margin:0 0 15px;color:#333;font-size:16px;font-weight:600}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(102,126,234,.1)}.detail-item:last-child{border-bottom:none}.detail-item.highlight{background:#667eea1a;padding:12px;margin:10px -20px;border-radius:8px;border-bottom:none}.detail-item.tax{background:#dc35451a;padding:12px;margin:10px -20px;border-radius:8px}.detail-label{color:#666;font-size:14px}.detail-value{color:#333;font-size:14px;font-weight:600}.detail-item.highlight .detail-value,.detail-item.tax .detail-value{color:#667eea;font-size:16px}.tax-table{border:2px solid #e9ecef;border-radius:8px;overflow:hidden}.table-header{display:grid;grid-template-columns:50px 1fr 60px 80px;gap:10px;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;font-size:13px}.table-body{max-height:350px;overflow-y:auto}.table-row{display:grid;grid-template-columns:50px 1fr 60px 80px;gap:10px;padding:12px;border-bottom:1px solid #e9ecef;transition:background .2s;font-size:13px}.table-row:hover{background:#667eea0d}.table-row:last-child{border-bottom:none}.col-level{font-weight:600;color:#667eea}.col-income{color:#333}.col-rate{color:#ffc107;font-weight:600}.col-deduction{color:#666}@media (max-width: 768px){.summary-cards{grid-template-columns:1fr 1fr}.table-header,.table-row{grid-template-columns:40px .8fr 50px 70px;font-size:12px;padding:10px}.deductions-grid{grid-template-columns:1fr}.button-group{flex-direction:column}}@media (max-width: 480px){.summary-cards{grid-template-columns:1fr}.table-header,.table-row{grid-template-columns:35px .7fr 45px 60px;font-size:11px;padding:8px}.col-deduction{display:none}.detail-item{flex-direction:column;align-items:flex-start;gap:5px}}.audio-converter{padding:20px}.audio-converter .tool-header{text-align:center;margin-bottom:30px}.audio-converter .tool-header h2{margin:0 0 10px;color:#333;font-size:28px}.audio-converter .tool-header p{margin:0;color:#666;font-size:14px}.converter-container{display:grid;grid-template-columns:1fr;gap:20px}.drop-zone{border:3px dashed #e9ecef;border-radius:12px;padding:60px 20px;text-align:center;cursor:pointer;transition:all .3s;position:relative;min-height:200px;display:flex;align-items:center;justify-content:center}.drop-zone.has-file{border-color:#28a745;background:#28a7450d}.drop-zone.converting{pointer-events:none;opacity:.7}.file-info{display:flex;flex-direction:column;align-items:center;gap:8px}.file-icon{font-size:48px}.file-name{font-size:16px;font-weight:600;color:#333;word-break:break-all;max-width:100%}.file-size{font-size:14px;color:#666}.format-select{margin-top:25px}.format-select label{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:#333;font-size:14px}.label-icon{font-size:18px}.format-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.format-option{padding:15px;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}.format-option:hover{border-color:#667eea;background:#667eea0d;transform:translateY(-2px)}.format-option.active{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a)}.format-option:disabled{opacity:.5;cursor:not-allowed;transform:none}.format-name{font-weight:600;color:#333;font-size:16px}.format-desc{font-size:12px;color:#666}.btn-convert,.btn-clear{flex:1;padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-convert{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-convert:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-convert:disabled{opacity:.6;cursor:not-allowed}.progress-bar{margin-top:20px;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden}.result-card{background:linear-gradient(135deg,#28a7450d,#1c9b530d);padding:25px;border-radius:12px;border:2px solid rgba(40,167,69,.2)}.result-card h3{margin:0 0 20px;color:#28a745;font-size:20px;font-weight:600}.result-actions{display:flex;gap:10px;margin-bottom:20px}.btn-download,.btn-preview{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-preview{background:#17a2b8;color:#fff}.btn-preview:hover{background:#138496;transform:translateY(-2px);box-shadow:0 4px 12px #17a2b866}.result-info{padding:15px;background:#fff;border-radius:8px;border:2px solid #e9ecef}.result-info p{margin:8px 0;color:#666;font-size:14px}.result-info p strong{color:#333}@media (max-width: 768px){.format-options{grid-template-columns:repeat(2,1fr)}.button-group,.result-actions{flex-direction:column}.drop-zone{padding:40px 20px;min-height:160px}}@media (max-width: 480px){.format-options{grid-template-columns:1fr}.upload-icon{font-size:36px}.upload-prompt p{font-size:14px}}.ocr-tool{padding:20px}.ocr-tool .tool-header{text-align:center;margin-bottom:30px}.ocr-tool .tool-header h2{margin:0 0 10px;color:#333;font-size:28px}.ocr-tool .tool-header p{margin:0;color:#666;font-size:14px}.ocr-container{display:grid;grid-template-columns:1fr;gap:20px}.upload-section,.result-section{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 8px #0000001a}.drop-zone{border:3px dashed #e9ecef;border-radius:12px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s;position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden}.drop-zone:hover{border-color:#667eea;background:#667eea0d}.drop-zone.has-image{border-color:#28a745;background:#28a74505;padding:20px}.drop-zone.recognizing{pointer-events:none;opacity:.7}.file-input{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;cursor:pointer}.file-input:disabled{cursor:not-allowed}.upload-prompt{display:flex;flex-direction:column;align-items:center;gap:10px}.upload-icon{font-size:48px;opacity:.5}.upload-prompt p{margin:0;color:#666;font-size:16px}.upload-hint{font-size:13px!important;color:#999!important}.image-preview{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%}.image-preview img{max-width:100%;max-height:400px;border-radius:8px;object-fit:contain}.image-info{display:flex;flex-direction:column;align-items:center;gap:5px}.file-name{font-size:14px;font-weight:600;color:#333;word-break:break-all;max-width:100%}.file-size{font-size:12px;color:#666}.error-message{margin-top:20px;padding:1.2rem;background:linear-gradient(135deg,#ffeeee80,#fccccc80);border:2px solid rgba(204,51,51,.3);border-radius:12px;color:#c33;display:flex;align-items:center;gap:.6rem;font-weight:500;line-height:1.6}.engine-select{margin-top:25px}.engine-select label{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:#333;font-size:14px}.engine-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.engine-option{padding:15px;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}.engine-option:hover{border-color:#667eea;background:#667eea0d;transform:translateY(-2px)}.engine-option.active{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a)}.engine-option:disabled{opacity:.5;cursor:not-allowed;transform:none}.engine-name{font-weight:600;color:#333;font-size:14px}.engine-desc{font-size:12px;color:#666}.language-select{margin-top:25px}.language-select label{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:#333;font-size:14px}.info-box{margin-top:25px;padding:15px;background:linear-gradient(135deg,#17a2b81a,#1493a41a);border-radius:8px;border:2px solid rgba(23,162,184,.2);display:flex;align-items:center;gap:10px;color:#17a2b8;font-size:13px}.info-icon,.label-icon{font-size:18px}.language-dropdown{width:100%;padding:12px 15px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:all .3s}.language-dropdown:focus{outline:none;border-color:#667eea}.language-dropdown:disabled{opacity:.6;cursor:not-allowed}.button-group{display:flex;gap:10px;margin-top:25px}.btn-recognize,.btn-clear{flex:1;padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.btn-recognize{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-recognize:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-recognize:disabled{opacity:.6;cursor:not-allowed}.btn-clear{background:#dc3545;color:#fff}.btn-clear:hover:not(:disabled){background:#c82333;transform:translateY(-2px);box-shadow:0 4px 12px #dc354566}.btn-clear:disabled{opacity:.6;cursor:not-allowed}.progress-section{margin-top:20px;padding:20px;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;border:2px solid rgba(102,126,234,.1)}.progress-bar{height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s;border-radius:4px}.progress-text{margin:0;text-align:center;color:#667eea;font-size:14px;font-weight:500}.result-section{margin-top:20px}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.result-header h3{margin:0;color:#28a745;font-size:20px;font-weight:600}.result-actions{display:flex;gap:10px}.btn-copy,.btn-download{padding:8px 16px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s}.btn-copy{background:#667eea;color:#fff}.btn-copy:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-download{background:#28a745;color:#fff}.btn-download:hover{background:#218838;transform:translateY(-2px);box-shadow:0 4px 12px #28a74566}.text-output{margin-bottom:15px}.result-textarea{width:100%;min-height:200px;max-height:400px;padding:15px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;font-family:inherit;line-height:1.6;resize:vertical;transition:border-color .3s}.result-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.text-stats{display:flex;gap:20px;padding:12px;background:linear-gradient(135deg,#28a7450d,#1c9b530d);border-radius:8px;border:2px solid rgba(40,167,69,.1)}.text-stats span{color:#666;font-size:13px}.info-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px}.info-card{background:#fff;padding:20px;border-radius:12px;border:2px solid #e9ecef}.info-card h3{margin:0 0 15px;color:#333;font-size:16px;font-weight:600}.info-card ul{margin:0;padding-left:20px}.info-card li{color:#666;font-size:13px;line-height:1.8;margin-bottom:8px}.info-card li strong{color:#333}@media (max-width: 768px){.button-group{flex-direction:column}.result-header{flex-direction:column;align-items:flex-start}.result-actions{width:100%}.result-actions button{flex:1}.drop-zone{min-height:250px;padding:30px 20px}.text-stats{flex-direction:column;gap:8px}}@media (max-width: 480px){.upload-icon{font-size:36px}.upload-prompt p{font-size:14px}.image-preview img{max-height:300px}}.regex-tester{display:flex;flex-direction:column;gap:20px}.regex-input-section{background:#f9fafb;padding:20px;border-radius:8px;border:1px solid #e5e7eb}.input-group{display:flex;align-items:center;gap:10px;margin-bottom:15px}.input-group label{font-weight:600;color:#374151;min-width:100px}.regex-input{flex:1;padding:12px 16px;border:2px solid #e5e7eb;border-radius:6px;font-size:16px;font-family:Courier New,monospace;transition:border-color .3s}.regex-input:focus{outline:none;border-color:#3b82f6}.regex-delimiter{color:#6b7280;font-weight:700;font-size:18px}.flags-section{margin-bottom:15px}.flags-section label{font-weight:600;color:#374151;display:block;margin-bottom:10px}.flag-options{display:flex;gap:20px}.flag-checkbox{display:flex;align-items:center;gap:6px;cursor:pointer;color:#4b5563;-webkit-user-select:none;user-select:none}.flag-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#3b82f6}.quick-patterns{margin-bottom:15px}.quick-patterns label{font-weight:600;color:#374151;display:block;margin-bottom:10px}.pattern-buttons{display:flex;flex-wrap:wrap;gap:8px}.pattern-button{padding:6px 12px;background:#fff;border:1px solid #d1d5db;border-radius:4px;font-size:13px;color:#4b5563;cursor:pointer;transition:all .2s}.pattern-button:hover{background:#f3f4f6;border-color:#9ca3af}.example-section{display:flex;gap:10px}.test-text-section{background:#f9fafb;padding:20px;border-radius:8px;border:1px solid #e5e7eb}.test-text-section label{font-weight:600;color:#374151;display:block;margin-bottom:10px}.test-textarea{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;font-family:Courier New,monospace;resize:vertical;transition:border-color .3s}.test-textarea:focus{outline:none;border-color:#3b82f6}.action-section{display:flex;justify-content:center}.secondary-button{padding:8px 16px;background:#fff;color:#4b5563;border:1px solid #d1d5db;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s}.error-message{padding:12px 16px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:6px;font-size:14px}.result-section{background:#f9fafb;padding:20px;border-radius:8px;border:1px solid #e5e7eb}.test-result{padding:16px;border-radius:6px;font-size:18px;font-weight:600;text-align:center;margin-bottom:20px}.test-result.success{background:#d1fae5;color:#059669;border:1px solid #a7f3d0}.test-result.failure{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}.matches-info{display:flex;flex-direction:column;gap:20px}.match-count{padding:10px 16px;background:#dbeafe;color:#1e40af;border-radius:6px;font-size:14px;font-weight:600;text-align:center}.highlight-section{background:#fff;padding:16px;border-radius:6px;border:1px solid #e5e7eb}.highlight-section label{font-weight:600;color:#374151;display:block;margin-bottom:10px}.highlighted-text{padding:12px;background:#f9fafb;border-radius:4px;font-family:Courier New,monospace;font-size:14px;line-height:1.8;white-space:pre-wrap;word-wrap:break-word}.highlighted-text mark{background:#fef08a;color:#854d0e;padding:2px 4px;border-radius:3px;font-weight:600}.matches-list{background:#fff;padding:16px;border-radius:6px;border:1px solid #e5e7eb}.matches-list label{font-weight:600;color:#374151;display:block;margin-bottom:12px}.match-item{background:#f9fafb;padding:12px;border-radius:6px;border:1px solid #e5e7eb;margin-bottom:10px}.match-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #e5e7eb}.match-index{font-weight:600;color:#3b82f6}.match-position{color:#6b7280;font-size:13px}.match-content{display:flex;align-items:center;gap:8px;margin-bottom:6px}.match-label{color:#6b7280;font-size:13px;font-weight:500}.match-value{background:#dbeafe;color:#1e40af;padding:4px 10px;border-radius:4px;font-family:Courier New,monospace;font-size:13px;word-break:break-all}.match-groups{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.group-value{background:#fce7f3;color:#be185d;padding:4px 8px;border-radius:4px;font-family:Courier New,monospace;font-size:12px}.text-diff-tool{display:flex;flex-direction:column;gap:20px}.diff-controls{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.checkbox-label{display:flex;align-items:center;gap:8px;color:#4b5563;cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#3b82f6}.diff-inputs{display:grid;grid-template-columns:1fr 1fr;gap:20px}.diff-input-container{display:flex;flex-direction:column;gap:8px}.diff-input-container label{font-weight:600;color:#374151;font-size:14px}.diff-textarea{width:100%;min-height:300px;padding:12px;border:2px solid #e5e7eb;border-radius:6px;font-family:Courier New,monospace;font-size:14px;resize:vertical;transition:border-color .3s}.diff-textarea:focus{outline:none;border-color:#3b82f6}.diff-results{background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;overflow:hidden}.diff-stats{display:flex;gap:20px;padding:15px 20px;background:#fff;border-bottom:1px solid #e5e7eb;flex-wrap:wrap}.stat-item{display:flex;align-items:center;gap:6px}.stat-label{color:#6b7280;font-size:13px}.stat-value{font-weight:600;font-size:16px}.stat-unchanged{color:#6b7280}.stat-modified{color:#f59e0b}.stat-added{color:#10b981}.stat-deleted{color:#ef4444}.diff-view{overflow:hidden}.diff-header{padding:12px 20px;background:#dbeafe;color:#1e40af;font-weight:600;font-size:14px;border-bottom:1px solid #bfdbfe}.diff-content{max-height:500px;overflow-y:auto}.diff-line{display:flex;padding:6px 0;border-bottom:1px solid #f3f4f6;font-family:Courier New,monospace;font-size:13px}.diff-unchanged{background:#fff}.diff-modified{background:#fffbeb}.diff-added{background:#d1fae5}.diff-deleted{background:#fef2f2}.diff-line .line-number{width:50px;padding:4px 8px;background:#f3f4f6;color:#6b7280;font-size:12px;text-align:right;flex-shrink:0;-webkit-user-select:none;user-select:none}.line-content-left,.line-content-right{flex:1;padding:4px 12px;white-space:pre-wrap;word-wrap:break-word}.line-content-left{color:#6b7280}.diff-added .line-content-right{color:#059669}.diff-deleted .line-content-left,.diff-modified .line-content-left{color:#dc2626}.diff-modified .line-content-right{color:#059669}@media (max-width: 768px){.diff-inputs{grid-template-columns:1fr}.diff-stats{flex-direction:column;gap:10px}}.date-calculator{display:flex;flex-direction:column;gap:20px}.mode-selector{display:flex;gap:10px;padding:10px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.mode-button{flex:1;padding:12px 20px;background:#fff;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .3s}.mode-button:hover{background:#f3f4f6;border-color:#9ca3af}.mode-button.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.calculator-content{background:#f9fafb;padding:24px;border-radius:8px;border:1px solid #e5e7eb}.calc-section{display:flex;flex-direction:column;gap:20px}.calc-section h3{margin:0;font-size:18px;color:#1f2937}.date-inputs{display:grid;grid-template-columns:1fr 1fr;gap:20px}.date-input-group{display:flex;flex-direction:column;gap:8px}.date-input-group label{font-weight:600;color:#374151;font-size:14px}.date-input-group input[type=date]{padding:10px;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;transition:border-color .3s}.date-input-group input[type=date]:focus{outline:none;border-color:#3b82f6}.quick-btn{padding:6px 12px;background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s;margin-top:4px}.quick-btn:hover{background:#bfdbfe}.add-inputs{display:flex;gap:15px}.add-input-group{display:flex;flex-direction:column;gap:8px;flex:1}.add-input-group label{font-weight:600;color:#374151;font-size:14px}.add-input-group input[type=number]{padding:10px;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;transition:border-color .3s}.add-input-group input[type=number]:focus{outline:none;border-color:#3b82f6}.primary-button{padding:12px 32px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;align-self:flex-start}.actions{display:flex;justify-content:center}.result-section{background:#fff;padding:24px;border-radius:8px;border:2px solid #e5e7eb}.result-content h3{margin:0 0 20px;font-size:20px;color:#1f2937}.diff-result,.add-result,.workdays-result{display:flex;flex-direction:column;gap:15px}.result-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb}.result-label{font-weight:600;color:#374151;font-size:15px}.result-value{font-weight:700;color:#3b82f6;font-size:16px}@media (max-width: 768px){.date-inputs{grid-template-columns:1fr}.add-inputs{flex-direction:column}}.image-compressor{display:flex;flex-direction:column;gap:24px}.setting-group{margin-bottom:24px}.setting-group label{display:block;font-weight:600;color:#374151;margin-bottom:12px;font-size:14px}.quality-slider,.width-slider{width:100%;height:8px;border-radius:4px;background:#e5e7eb;outline:none;-webkit-appearance:none}.quality-slider::-webkit-slider-thumb,.width-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 2px 4px #0000001a}.quality-slider::-moz-range-thumb,.width-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;box-shadow:0 2px 4px #0000001a}.compression-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}.primary-button:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f64d}.primary-button:disabled{opacity:.6;cursor:not-allowed}.file-info{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#6b7280}.compression-ratio{color:#10b981;font-weight:600}.image-watermark{display:flex;flex-direction:column;gap:24px}.text-input,.select-input{width:100%;padding:10px 12px;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;transition:border-color .3s}.text-input:focus,.select-input:focus{outline:none;border-color:#3b82f6}.select-input{cursor:pointer}.size-slider,.opacity-slider{width:100%;height:8px;border-radius:4px;background:#e5e7eb;outline:none;-webkit-appearance:none}.size-slider::-webkit-slider-thumb,.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 2px 4px #0000001a}.size-slider::-moz-range-thumb,.opacity-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;box-shadow:0 2px 4px #0000001a}.watermark-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}.preview-section{background:#f9fafb;padding:24px;border-radius:8px;border:1px solid #e5e7eb}.preview-section h3{margin:0 0 20px;font-size:20px;color:#1f2937}.image-preview{display:grid;grid-template-columns:1fr 1fr;gap:20px}.preview-item{background:#fff;padding:16px;border-radius:8px;border:1px solid #e5e7eb}.preview-item h4{margin:0 0 12px;font-size:16px;color:#374151}.preview-box{min-height:200px;display:flex;align-items:center;justify-content:center;background:#f9fafb;border-radius:6px;overflow:hidden;margin-bottom:12px}.preview-box img{max-width:100%;max-height:300px;object-fit:contain}.download-button{width:100%;margin-top:12px;padding:12px;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}@media (max-width: 768px){.image-preview{grid-template-columns:1fr}}.image-stitcher{display:flex;flex-direction:column;gap:24px}.upload-section{background:#f9fafb;padding:40px;border-radius:8px;border:2px dashed #d1d5db;text-align:center;transition:all .3s}.upload-section:hover{border-color:#3b82f6;background:#f0f9ff}.upload-area{display:flex;justify-content:center}.upload-button{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;padding:20px 40px;border-radius:8px;transition:all .3s}.upload-button:hover{background:#f3f4f6}.upload-icon{font-size:48px;color:#6b7280}.upload-button p{margin:0;font-size:16px;color:#374151;font-weight:500}.upload-hint{font-size:13px;color:#6b7280}.settings-section{background:#f9fafb;padding:24px;border-radius:8px;border:1px solid #e5e7eb}.setting-group{margin-bottom:20px}.setting-group:last-of-type{margin-bottom:0}.setting-group label{display:block;font-weight:600;color:#374151;margin-bottom:8px;font-size:14px}.layout-options{display:flex;gap:12px}.layout-button{flex:1;padding:12px 20px;background:#fff;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .3s}.layout-button:hover{background:#f3f4f6;border-color:#9ca3af}.layout-button.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.gap-slider{width:100%;height:8px;border-radius:4px;background:#e5e7eb;outline:none;-webkit-appearance:none}.gap-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 2px 4px #0000001a}.gap-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;box-shadow:0 2px 4px #0000001a}.slider-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#6b7280}.color-input{width:60px;height:40px;padding:4px;border:2px solid #e5e7eb;border-radius:6px;cursor:pointer;transition:border-color .3s}.color-input:hover{border-color:#3b82f6}.stitch-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}.images-section{background:#f9fafb;padding:24px;border-radius:8px;border:1px solid #e5e7eb}.images-section h3{margin:0 0 16px;font-size:18px;color:#1f2937}.images-list{display:flex;flex-direction:column;gap:12px}.image-item{display:flex;align-items:center;gap:12px;background:#fff;padding:12px;border-radius:6px;border:1px solid #e5e7eb}.image-preview-small{width:60px;height:60px;flex-shrink:0;overflow:hidden;border-radius:4px;background:#f9fafb}.image-preview-small img{width:100%;height:100%;object-fit:cover}.image-info{flex:1;display:flex;flex-direction:column;gap:4px}.image-name{font-weight:600;color:#374151;font-size:14px;word-break:break-all}.image-size{color:#6b7280;font-size:12px}.remove-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:4px;cursor:pointer;font-size:18px;transition:all .2s}.remove-button:hover{background:#fee2e2;border-color:#fca5a5}.result-section{background:#f9fafb;padding:24px;border-radius:8px;border:1px solid #e5e7eb}.result-section h3{margin:0 0 16px;font-size:18px;color:#1f2937}.result-preview{display:flex;justify-content:center;margin-bottom:16px;padding:16px;background:#fff;border-radius:6px;border:1px solid #e5e7eb}.result-preview img{max-width:100%;max-height:500px;object-fit:contain}.download-button{width:100%;padding:12px;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.download-button:hover{background:#059669;transform:translateY(-2px);box-shadow:0 4px 12px #10b9814d}.unit-converter{display:flex;flex-direction:column;gap:24px}.category-section{background:#f9fafb;padding:24px;border-radius:8px;border:1px solid #e5e7eb}.category-section label{display:block;font-weight:600;color:#374151;margin-bottom:12px;font-size:14px}.category-buttons{display:flex;flex-wrap:wrap;gap:10px}.category-button{padding:10px 20px;background:#fff;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .3s}.category-button:hover{background:#f3f4f6;border-color:#9ca3af}.category-button.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.converter-section{background:#f9fafb;padding:24px;border-radius:8px;border:1px solid #e5e7eb}.input-group{margin-bottom:24px}.input-group label{display:block;font-weight:600;color:#374151;margin-bottom:8px;font-size:14px}.number-input{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:6px;font-size:16px;transition:border-color .3s}.number-input:focus{outline:none;border-color:#3b82f6}.unit-selectors{display:flex;align-items:center;gap:12px}.unit-selector{flex:1}.unit-selector label{display:block;font-weight:600;color:#374151;margin-bottom:8px;font-size:14px}.unit-select{width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;cursor:pointer;transition:border-color .3s}.unit-select:focus{outline:none;border-color:#3b82f6}.swap-button{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#dbeafe;color:#1e40af;border:2px solid #bfdbfe;border-radius:50%;font-size:24px;cursor:pointer;transition:all .3s;margin-top:24px}.swap-button:hover{background:#bfdbfe;transform:rotate(180deg)}.actions{display:flex;gap:12px;justify-content:center}.primary-button{padding:12px 32px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.primary-button:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f64d}.secondary-button{padding:12px 32px;background:#fff;color:#4b5563;border:1px solid #d1d5db;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.secondary-button:hover{background:#f3f4f6;border-color:#9ca3af}.result-section{background:#fff;padding:32px;border-radius:8px;border:2px solid #e5e7eb;text-align:center}.result-section h3{margin:0 0 20px;font-size:18px;color:#374151}.result-value{font-size:32px;font-weight:700;color:#3b82f6;word-wrap:break-word}@media (max-width: 768px){.unit-selectors{flex-direction:column}.swap-button{margin-top:0;transform:rotate(90deg)}.swap-button:hover{transform:rotate(270deg)}}.markdown-editor{display:flex;flex-direction:column;gap:20px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.toolbar-group{display:flex;gap:4px}.toolbar-group:not(:last-child){padding-right:8px;border-right:1px solid #e5e7eb}.toolbar button{min-width:36px;height:36px;padding:4px 8px;background:#fff;border:1px solid #d1d5db;border-radius:4px;font-size:14px;font-weight:600;color:#4b5563;cursor:pointer;transition:all .2s}.toolbar button:hover{background:#f3f4f6;border-color:#9ca3af}.toolbar-actions button{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}.toolbar-actions button:hover{background:#bfdbfe}.editor-container{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:600px}.editor-pane,.preview-pane{display:flex;flex-direction:column;gap:12px;background:#f9fafb;padding:16px;border-radius:8px;border:1px solid #e5e7eb}.editor-pane h3,.preview-pane h3{margin:0;font-size:16px;color:#374151;font-weight:600}#markdown-textarea{flex:1;width:100%;padding:16px;border:2px solid #e5e7eb;border-radius:6px;font-family:Courier New,monospace;font-size:14px;line-height:1.6;resize:none;transition:border-color .3s}#markdown-textarea:focus{outline:none;border-color:#3b82f6}.preview-content{flex:1;padding:16px;background:#fff;border-radius:6px;border:1px solid #e5e7eb;overflow-y:auto;line-height:1.8}.preview-content h1{font-size:28px;margin:1.5em 0 .5em;color:#111827;border-bottom:2px solid #e5e7eb;padding-bottom:8px}.preview-content h2{font-size:24px;margin:1.5em 0 .5em;color:#1f2937;border-bottom:1px solid #e5e7eb;padding-bottom:6px}.preview-content h3{font-size:20px;margin:1.5em 0 .5em;color:#374151}.preview-content strong{font-weight:700;color:#111827}.preview-content em{font-style:italic;color:#4b5563}.preview-content code{background:#f3f4f6;color:#dc2626;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;font-size:.9em}.preview-content pre{background:#1f2937;color:#f9fafb;padding:16px;border-radius:6px;overflow-x:auto;margin:1em 0}.preview-content pre code{background:transparent;color:inherit;padding:0;font-size:14px}.preview-content blockquote{border-left:4px solid #3b82f6;padding-left:16px;color:#6b7280;margin:1em 0;font-style:italic}.preview-content a{color:#3b82f6;text-decoration:none;transition:color .2s}.preview-content a:hover{color:#2563eb;text-decoration:underline}.preview-content ul,.preview-content ol{padding-left:20px;margin:.5em 0}.preview-content li{margin:4px 0;color:#374151}.preview-content img{max-width:100%;height:auto;border-radius:4px;margin:8px 0}@media (max-width: 768px){.editor-container{grid-template-columns:1fr;min-height:auto}#markdown-textarea,.preview-content{min-height:400px}.toolbar{flex-wrap:wrap}}.app{min-height:100vh;display:flex;flex-direction:column;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.app-header{background:#fffffffa;padding:2.5rem 2rem;text-align:center;box-shadow:0 8px 32px #0000001a;border-bottom:3px solid rgba(102,126,234,.3);position:relative}.logo{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.5rem;animation:fadeInDown .8s ease-out}.logo-icon{font-size:3rem;filter:drop-shadow(0 4px 8px rgba(102,126,234,.3))}.app-header h1{font-size:2.8rem;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;font-weight:700;letter-spacing:-.5px}.header-controls{display:flex;flex-direction:column;align-items:center;gap:1rem}.subtitle{color:#666;font-size:1.1rem;font-weight:400;opacity:.8}.language-switch{position:absolute;top:2.5rem;right:2rem;padding:.6rem 1.5rem;border:2px solid rgba(102,126,234,.3);border-radius:25px;background:#fff;color:#667eea;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea1a;z-index:10}.language-switch:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #667eea4d}.app-nav{display:flex;justify-content:center;gap:1.5rem;padding:2rem;background:#ffffffb3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);flex-wrap:wrap;box-shadow:0 4px 20px #00000014}.nav-item{display:flex;align-items:center;gap:.8rem;padding:1.2rem 2.5rem;border:2px solid transparent;border-radius:50px;background:#fff;color:#666;font-size:1.05rem;font-weight:500;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px #00000014;position:relative;overflow:hidden}.nav-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);transition:all .4s ease;z-index:0}.nav-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 25px #667eea4d;border-color:#667eea4d}.nav-item.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-4px) scale(1.05);box-shadow:0 12px 35px #667eea66}.nav-item .nav-icon,.nav-item .nav-text{position:relative;z-index:1}.nav-icon{font-size:1.6rem;transition:transform .3s ease}.nav-item:hover .nav-icon{transform:scale(1.2) rotate(5deg)}.app-main{flex:1;padding:2rem;max-width:1400px;margin:0 auto;width:100%}.tool-container{background:#fffffffa;border-radius:24px;padding:2.5rem;box-shadow:0 20px 60px #00000026,0 0 0 1px #ffffff80 inset;animation:fadeInUp .6s ease-out}.tool-header{text-align:center;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:3px solid linear-gradient(90deg,transparent,rgba(102,126,234,.2),transparent);position:relative}.tool-header:after{content:"";position:absolute;bottom:-3px;left:50%;transform:translate(-50%);width:200px;height:3px;background:linear-gradient(90deg,transparent,#667eea,#764ba2,transparent);border-radius:3px}.tool-header h2{font-size:2.2rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.8rem;font-weight:700}.tool-header p{color:#666;font-size:1.05rem;opacity:.8}.upload-area{border:3px dashed rgba(102,126,234,.3);border-radius:20px;padding:3.5rem 2rem;text-align:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#667eea0d,#764ba20d);position:relative;overflow:hidden}.upload-area:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,.1) 0%,transparent 70%);opacity:0;transition:opacity .4s ease}.upload-area:hover{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a);transform:translateY(-2px);box-shadow:0 8px 25px #667eea33}.upload-area:hover:before{opacity:1}.upload-icon{font-size:4.5rem;margin-bottom:1.2rem;transition:transform .4s ease}.upload-area:hover .upload-icon{transform:scale(1.1) rotate(-5deg)}.upload-area p{color:#666;font-size:1.15rem;font-weight:500;position:relative;z-index:1}.upload-area input[type=file]{margin-top:1.2rem;padding:.8rem 1.5rem;border-radius:10px;border:2px solid #ddd;background:#fff;cursor:pointer;transition:all .3s ease;position:relative;z-index:1}.upload-area input[type=file]:hover{border-color:#667eea;box-shadow:0 4px 15px #667eea33}.file-list{margin-top:1.5rem}.file-list h4{margin-bottom:1rem;color:#333;font-weight:600}.extract-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;flex-wrap:wrap;gap:1rem}.extract-header h4{margin:0;color:#333;font-weight:600;font-size:1.15rem}.file-list-content{max-height:450px;overflow-y:auto;padding-right:.5rem}.progress-bar{width:100%;height:10px;background:#e0e0e080;border-radius:10px;overflow:hidden;margin-bottom:1rem;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb);transition:width .4s ease;position:relative;overflow:hidden}.progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.extract-status{margin-bottom:1rem}.extract-progress-text{text-align:center;color:#666;font-size:.95rem;margin-top:.5rem;font-weight:500;padding:.8rem;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:10px}.file-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;margin-bottom:.8rem;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid transparent;position:relative;overflow:hidden}.file-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,.1),transparent);transition:all .5s ease}.file-item.clickable{cursor:pointer}.file-item.clickable:hover{background:linear-gradient(135deg,#667eea1a,#764ba21a);transform:translate(8px);border-color:#667eea4d;box-shadow:0 4px 15px #667eea26}.file-item.clickable:hover:before{left:100%}.file-name{color:#333;font-weight:500;font-size:.95rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{color:#666;font-size:.85rem;font-weight:500;padding:.3rem .8rem;background:#667eea1a;border-radius:15px;min-width:80px;text-align:center}.primary-button,.secondary-button,.success-button{padding:.9rem 2.2rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);margin-top:1rem;margin-right:.5rem;position:relative;overflow:hidden}.primary-button{background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);color:#fff;box-shadow:0 4px 15px #667eea4d}.primary-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:all .5s ease}.primary-button:hover:not(:disabled):before{left:100%}.primary-button:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px #667eea66}.primary-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.secondary-button{background:linear-gradient(135deg,#e9ecef,#dee2e6);color:#333;box-shadow:0 4px 15px #00000014}.secondary-button:hover{background:linear-gradient(135deg,#dee2e6,#cfd8dc);transform:translateY(-2px);box-shadow:0 6px 20px #0000001f}.success-button{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;box-shadow:0 4px 15px #28a7454d}.success-button:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 8px 25px #28a74566;background:linear-gradient(135deg,#218838,#1ea080)}.success-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.tool-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:2.5rem}.tool-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1);transition:all .3s ease}.tool-section:hover{border-color:#667eea4d;box-shadow:0 8px 30px #667eea1a}.tool-section h3{margin-bottom:1.8rem;color:#333;font-weight:600;font-size:1.3rem;display:flex;align-items:center;gap:.5rem}.tool-section h3:before{content:"";width:4px;height:24px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:2px}.converter-container{display:grid;gap:2rem}.converter-container>div{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.upload-section{text-align:center}.file-info{display:flex;justify-content:center;gap:1rem;margin-top:1rem;padding:1.2rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;border:1px solid rgba(102,126,234,.1)}.format-selector{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}.format-selector label{font-weight:600;color:#333;font-size:1rem}.format-selector select{flex:1;padding:.9rem 1rem;border:2px solid #ddd;border-radius:10px;font-size:1rem;transition:all .3s ease;background:#fff;cursor:pointer}.format-selector select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.format-selector select:hover{border-color:#667eea}.result-section{margin-top:1.5rem}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem}.result-header h3{margin:0;color:#333;font-weight:600;font-size:1.15rem}.result-actions{display:flex;gap:.6rem}.result-content{background:linear-gradient(135deg,#667eea05,#764ba205);padding:1.5rem;border-radius:12px;max-height:450px;overflow:auto;border:1px solid rgba(102,126,234,.1)}.result-content pre{margin:0;white-space:pre-wrap;word-wrap:break-word;font-family:Courier New,monospace;font-size:.9rem;color:#333;line-height:1.6}.json-parser-container{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}.json-input-section,.json-output-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1);transition:all .3s ease}.json-input-section:hover,.json-output-section:hover{border-color:#667eea4d;box-shadow:0 8px 30px #667eea1a}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.section-header h3{margin:0;color:#333;font-weight:600;font-size:1.2rem}.input-actions{display:flex;gap:.6rem;flex-wrap:wrap}.json-textarea{width:100%;height:320px;padding:1rem;border:2px solid #ddd;border-radius:12px;font-family:Courier New,monospace;font-size:.95rem;resize:vertical;transition:all .3s ease;background:#fff;line-height:1.6}.json-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.json-textarea:hover{border-color:#667eea}.json-actions{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}.error-message{margin-top:1rem;padding:1.2rem;background:linear-gradient(135deg,#ffeeee80,#fccccc80);border:2px solid rgba(204,51,51,.3);border-radius:12px;color:#c33;display:flex;align-items:center;gap:.6rem;font-weight:500}.loading-message{margin-top:1rem;padding:1.5rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border:2px solid rgba(102,126,234,.2);border-radius:12px;color:#667eea;display:flex;align-items:center;justify-content:center;gap:1rem;font-weight:500}.loading-message .spinner{width:20px;height:20px;border:3px solid rgba(102,126,234,.2);border-top-color:#667eea;border-radius:50%;animation:spin .8s linear infinite}.search-box{flex:1;min-width:200px}.search-input{width:100%;padding:.7rem 1.2rem;border:2px solid #ddd;border-radius:25px;font-size:.95rem;transition:all .3s ease;background:#fff}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.search-input:hover{border-color:#667eea}.json-stats{display:flex;gap:1.8rem;padding:1.2rem 1.5rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;margin-bottom:1.2rem;border:1px solid rgba(102,126,234,.15)}.stat-item{display:flex;align-items:center;gap:.6rem}.stat-label{color:#666;font-size:.95rem;font-weight:500}.stat-value{font-weight:700;color:#667eea;font-size:1.1rem}.json-tree{background:linear-gradient(135deg,#667eea05,#764ba205);padding:1.8rem;border-radius:12px;max-height:420px;overflow:auto;border:1px solid rgba(102,126,234,.1)}.json-node{padding:.3rem 0;font-family:Courier New,monospace;font-size:.9rem}.json-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;margin-right:.5rem;transition:all .2s ease}.json-toggle:hover{transform:scale(1.2)}.json-key{color:#92278f;margin-right:.5rem}.json-colon{color:#999;margin-right:.5rem}.json-bracket{color:#667eea;margin-right:.5rem}.json-length{color:#999;font-size:.85rem}.json-string{color:#2a8f29}.json-number{color:#2980b9}.json-boolean{color:#e67e22}.json-true,.json-false{font-weight:600}.json-true{color:#27ae60}.json-false{color:#c0392b}.json-null{color:#95a5a6}.json-null-value{color:#95a5a6;font-style:italic}.json-object-entry{display:flex;align-items:flex-start;margin:.3rem 0}.json-legend{display:flex;gap:1.8rem;padding:1.2rem 1.5rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;margin-top:1.2rem;flex-wrap:wrap;border:1px solid rgba(102,126,234,.1)}.legend-item{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:#666;font-weight:500}.legend-color{width:18px;height:18px;border-radius:5px;box-shadow:0 2px 5px #0000001a}.legend-string{background:linear-gradient(135deg,#2a8f29,#27ae60)}.legend-number{background:linear-gradient(135deg,#2980b9,#3498db)}.legend-boolean{background:linear-gradient(135deg,#e67e22,#f39c12)}.legend-null{background:linear-gradient(135deg,#95a5a6,#7f8c8d)}.app-footer{text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#fffffff2,#f8f9faf2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#666;margin-top:3rem;border-top:2px solid rgba(102,126,234,.15)}.footer-content{max-width:1200px;margin:0 auto}.footer-title{font-size:1.8rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-description{font-size:1rem;line-height:1.8;margin-bottom:2rem;opacity:.8}.footer-features{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:2rem}.feature-tag{background:linear-gradient(135deg,#667eea1a,#764ba21a);color:#667eea;padding:.5rem 1.2rem;border-radius:20px;font-weight:600;font-size:.9rem;border:1px solid rgba(102,126,234,.2);transition:all .3s ease}.feature-tag:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px #667eea4d}.footer-copyright{font-size:.9rem;opacity:.7;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(102,126,234,.1)}.app-footer p{margin:0;font-size:.95rem;opacity:.9}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.app-header{padding:2rem 1.5rem}.language-switch{position:absolute;top:1.5rem;right:1rem;padding:.5rem 1rem;font-size:.85rem}.app-header h1{font-size:2rem}.logo-icon{font-size:2.5rem}.app-nav{padding:1.5rem 1rem;gap:1rem}.nav-item{padding:1rem 1.8rem;font-size:.95rem}.nav-icon{font-size:1.4rem}.tool-container{padding:1.5rem;border-radius:20px}.tool-sections{grid-template-columns:1fr;gap:2rem}.tool-section{padding:1.5rem}.json-parser-container{grid-template-columns:1fr}.extract-header,.section-header{flex-direction:column;align-items:flex-start}.input-actions{width:100%;flex-wrap:wrap}}.screenshot-container{display:flex;flex-direction:column;gap:2rem}.url-input-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.url-input-wrapper{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.5rem}.url-input-wrapper label{font-weight:600;color:#333;font-size:1rem}.url-input{width:100%;padding:.9rem 1.2rem;border:2px solid #ddd;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fff}.url-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.url-input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.6}.url-input::placeholder{color:#999}.screenshot-progress{margin-top:1.5rem}.screenshot-progress .progress-text{text-align:center;color:#666;font-size:.95rem;margin-top:.5rem;font-weight:500}.screenshot-loading{background:linear-gradient(135deg,#667eea08,#764ba208);padding:3rem 2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1);text-align:center}.screenshot-loading p{margin:.8rem 0;color:#666;font-size:1rem}.loading-hint{color:#999;font-size:.9rem!important}.screenshot-tips{text-align:center;padding:1rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:10px;margin-top:1.5rem}.screenshot-tips p{margin:0;color:#666;font-size:.95rem}.screenshot-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.info-card{background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.5rem;border-radius:16px;border:2px solid rgba(102,126,234,.1);transition:all .3s ease}.info-card:hover{border-color:#667eea4d;box-shadow:0 8px 30px #667eea1a}.info-card h3{margin:0 0 1rem;color:#333;font-weight:600;font-size:1.15rem}.info-card ul{list-style:none;padding:0;margin:0}.info-card li{color:#666;font-size:.95rem;line-height:1.6;position:relative;padding:.5rem 0 .5rem 1.5rem}.info-card li:before{content:"•";position:absolute;left:0;color:#667eea;font-weight:700;font-size:1.2rem;line-height:1.6}.screenshot-result{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.result-header h3{margin:0;color:#333;font-weight:600;font-size:1.2rem}.merged-preview{background:#fff;padding:1.5rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 4px 20px #00000014;overflow:auto;max-height:600px}.merged-preview img{display:block;margin:0 auto;box-shadow:0 4px 15px #0000001a}.separate-screenshots h4{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1rem}.screenshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.screenshot-item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #00000014;transition:all .3s ease}.screenshot-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px #667eea33}.screenshot-item img{width:100%;height:auto;display:block;border-bottom:2px solid #f0f0f0}.screenshot-actions{padding:1rem;text-align:center}.screenshot-actions .secondary-button{width:100%;padding:.7rem 1rem;font-size:.9rem}.loading-spinner{width:60px;height:60px;border:4px solid rgba(102,126,234,.1);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.encoder-container{display:flex;flex-direction:column;gap:2rem}.encoder-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.control-group{display:flex;flex-direction:column;gap:.8rem}.control-group label{font-weight:600;color:#333;font-size:1rem}.control-select{padding:.8rem 1rem;border:2px solid #ddd;border-radius:10px;font-size:1rem;background:#fff;cursor:pointer;transition:all .3s ease}.control-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.action-buttons{display:flex;gap:.8rem}.action-buttons button{flex:1;padding:.8rem 1.5rem;border:2px solid #ddd;border-radius:10px;background:#fff;cursor:pointer;font-weight:600;transition:all .3s ease}.action-buttons button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.action-buttons button:hover{border-color:#667eea}.encoder-input-section{display:flex;flex-direction:column;gap:1rem}.encoder-input-section label{font-weight:600;color:#333;font-size:1rem}.encoder-textarea{width:100%;min-height:150px;padding:1rem;border:2px solid #ddd;border-radius:12px;font-family:Courier New,monospace;font-size:.95rem;resize:vertical;transition:all .3s ease;background:#fff}.encoder-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.result-textarea{background:linear-gradient(135deg,#667eea05,#764ba205)}.encoder-output-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.5rem;border-radius:16px;border:2px solid rgba(102,126,234,.1)}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.output-header label{font-weight:600;color:#333;font-size:1rem}.image-converter-container{display:flex;flex-direction:column;gap:2rem}.converter-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.quality-slider{width:100%;margin-top:.5rem}.image-preview{background:#fff;padding:1.5rem;border-radius:12px;text-align:center;box-shadow:0 4px 15px #00000014}.image-preview img{max-width:100%;height:auto;max-height:400px;display:block;margin:0 auto}.preview-section h3{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1rem}.convert-actions{display:flex;gap:1rem;justify-content:center}.timestamp-container{display:flex;flex-direction:column;gap:2rem}.current-time-card{background:linear-gradient(135deg,#667eea14,#764ba214);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.2);text-align:center}.current-time-card h3{color:#333;font-weight:600;font-size:1.2rem;margin-bottom:1.5rem}.time-display{margin-bottom:2rem}.time-value{font-size:1.8rem;font-weight:700;color:#667eea;margin-bottom:1rem}.timestamp-value{font-size:1.1rem;color:#666;margin-bottom:.5rem}.timezone-selector{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding:1rem;background:#667eea0d;border-radius:12px;border:1px solid rgba(102,126,234,.15)}.timezone-selector label{font-weight:600;color:#333;font-size:.95rem;white-space:nowrap}.timezone-select{flex:1;padding:.6rem 1rem;border:2px solid #ddd;border-radius:8px;font-size:.95rem;background:#fff;color:#333;cursor:pointer;transition:all .3s ease}.timezone-select:hover{border-color:#667eea}.timezone-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.timezone-info{padding:.8rem;background:#667eea14;border-radius:8px;border-left:4px solid #667eea;font-size:.9rem;color:#555;margin-top:.5rem;font-weight:500}.conversion-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.conversion-card{background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.5rem;border-radius:16px;border:2px solid rgba(102,126,234,.1)}.conversion-card h3{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1.5rem}.input-group{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.5rem}.input-group label{font-weight:600;color:#333;font-size:.95rem}.timestamp-input,.date-input{padding:.8rem 1rem;border:2px solid #ddd;border-radius:10px;font-size:1rem;transition:all .3s ease}.timestamp-input:focus,.date-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.result-group{display:flex;flex-direction:column;gap:1rem}.result-group label{font-weight:600;color:#333;font-size:.95rem}.result-display{background:#fff;padding:1rem;border-radius:10px;font-family:Courier New,monospace;font-size:1rem;color:#333;word-break:break-all}.qrcode-container{display:flex;flex-direction:column;gap:2rem}.qrcode-input-section{display:flex;flex-direction:column;gap:1.5rem}.qrcode-textarea{width:100%;padding:1rem;border:2px solid #ddd;border-radius:12px;font-family:Courier New,monospace;font-size:1rem;resize:vertical;transition:all .3s ease;background:#fff}.qrcode-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.qrcode-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.size-slider{width:100%;margin-top:.5rem}.color-picker{width:100%;height:45px;border:2px solid #ddd;border-radius:10px;cursor:pointer;padding:.2rem;background:#fff}.qrcode-output-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1);text-align:center}.qrcode-display{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 15px #00000014}.qrcode-display canvas{max-width:100%;height:auto}.qrcode-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.image-cropper-container{display:flex;flex-direction:column;gap:2rem}.crop-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.crop-section h3{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1.2rem}.image-container{position:relative;display:inline-block;margin-bottom:1.5rem;cursor:crosshair;max-width:100%}.crop-overlay{position:absolute;border:2px dashed #667eea;background:#667eea1a;pointer-events:none}.crop-handle{position:absolute;width:16px;height:16px;background:#667eea;border:2px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #0003;pointer-events:auto;transition:transform .2s ease}.crop-handle:hover{transform:scale(1.2)}.crop-actions{display:flex;gap:1rem;justify-content:center}.dns-container{display:flex;flex-direction:column;gap:2rem}.dns-input-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.dns-input{width:100%;padding:.9rem 1.2rem;border:2px solid #ddd;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#fff}.dns-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.dns-actions{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.dns-results{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.dns-results h3{color:#333;font-weight:600;font-size:1.2rem;margin-bottom:1.5rem}.results-list{display:flex;flex-direction:column;gap:1rem}.dns-record-item{background:#fff;padding:1.5rem;border-radius:12px;border:2px solid rgba(102,126,234,.1);transition:all .3s ease}.dns-record-item:hover{border-color:#667eea;box-shadow:0 4px 15px #667eea26}.record-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}.record-type{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.4rem 1rem;border-radius:20px;font-weight:600;font-size:.9rem}.record-ttl{color:#666;font-size:.9rem}.record-data{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;flex-wrap:wrap}.record-label{color:#666;font-weight:500}.record-value{flex:1;font-family:Courier New,monospace;color:#333;word-break:break-all;min-width:200px}.record-info{color:#999;font-size:.85rem;font-style:italic}.copy-small-button{padding:.4rem .8rem;border:2px solid #ddd;border-radius:8px;background:#fff;cursor:pointer;transition:all .3s ease;font-size:.9rem}.copy-small-button:hover{background:#667eea;color:#fff;border-color:#667eea}.base-converter-container{display:flex;flex-direction:column;gap:2rem}.converter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.base-input-card{background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.8rem;border-radius:16px;border:2px solid rgba(102,126,234,.1);transition:all .3s ease}.base-input-card:hover{border-color:#667eea4d;box-shadow:0 8px 30px #667eea1a}.base-input-card h3{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1rem}.input-wrapper{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}.base-input{flex:1;padding:.8rem 1rem;border:2px solid #ddd;border-radius:10px;font-family:Courier New,monospace;font-size:1rem;transition:all .3s ease;background:#fff}.base-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.base-label{color:#666;font-size:.9rem;font-style:italic}.converter-actions{display:flex;justify-content:center;gap:1rem}.example-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.5rem;border-radius:16px;border:2px solid rgba(102,126,234,.1)}.example-section h3{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1rem}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.8rem}.example-item{background:#fff;padding:.8rem 1rem;border-radius:8px;font-size:.95rem;color:#333}.example-label{font-weight:600;color:#667eea}.example-value{color:#666}.currency-converter-container{display:flex;flex-direction:column;gap:2rem}.converter-input-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.currency-input{width:100%;padding:.9rem 1.2rem;border:2px solid #ddd;border-radius:12px;font-size:1.1rem;transition:all .3s ease;background:#fff}.currency-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.currency-selector-group{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}.currency-select{flex:1;min-width:200px}.swap-button{padding:.8rem 1rem;border:2px solid #ddd;border-radius:12px;background:#fff;cursor:pointer;font-size:1.5rem;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.swap-button:hover{background:#667eea;color:#fff;transform:rotate(180deg)}.loading-message{text-align:center;padding:2rem;color:#666}.loading-message p{margin-top:1rem;font-size:1rem}.update-info{text-align:center;padding:1.5rem;background:linear-gradient(135deg,#667eea08,#764ba208);border-radius:12px;border:1px solid rgba(102,126,234,.1)}.update-info p{color:#666;font-size:.95rem;margin:.5rem 0}.result-display.large{font-size:1.3rem;font-weight:600;text-align:center;padding:1.5rem;background:linear-gradient(135deg,#667eea0d,#764ba20d);border-radius:12px;color:#667eea}.result-details{margin-top:1.5rem;padding:1.5rem;background:#fff;border-radius:12px}.result-detail{color:#666;font-size:.95rem;margin:.8rem 0;font-family:Courier New,monospace}.currency-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}.currency-tag{background:#fff;padding:.8rem 1rem;border-radius:8px;font-size:.95rem;color:#333;transition:all .3s ease}.currency-tag:hover{background:#667eea1a;transform:translateY(-2px)}.calculator-container{display:flex;flex-direction:column;gap:2rem}.calculator-display{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:2rem;border-radius:20px;box-shadow:0 8px 30px #0000004d;position:relative}.memory-indicator{position:absolute;top:1rem;right:1rem}.memory-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.4rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600}.calculator-mode{text-align:right;color:#fff9;font-size:.9rem;margin-bottom:.5rem}.calculator-mode .active{color:#667eea;font-weight:700}.display-value{text-align:right;font-size:3rem;font-weight:700;color:#fff;font-family:Courier New,monospace;padding:1rem 0;word-wrap:break-word}.calculator-buttons{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.button-row{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:.8rem}.calc-button{padding:1.2rem;border:2px solid rgba(102,126,234,.2);border-radius:12px;background:#fff;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .3s ease;color:#333}.calc-button:hover:not(:disabled){background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translateY(-2px);box-shadow:0 4px 15px #667eea4d}.calc-button:disabled{opacity:.4;cursor:not-allowed}.function-btn{background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.operator-btn{background:linear-gradient(135deg,#ffeaa7,#fdcb6e)}.clear-btn{background:linear-gradient(135deg,#ff7675,#d63031);color:#fff}.clear-btn:hover:not(:disabled){background:linear-gradient(135deg,#d63031,#c0392b)}.equals-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.equals-btn:hover:not(:disabled){background:linear-gradient(135deg,#764ba2,#667eea);transform:scale(1.05)}.calculator-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.5rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.memory-controls,.mode-controls{display:flex;gap:.8rem;justify-content:center}.control-btn{padding:.8rem 1.2rem;border:2px solid rgba(102,126,234,.2);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:.95rem;transition:all .3s ease;color:#333}.control-btn:hover{border-color:#667eea;background:#667eea1a}.control-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.calculator-history{background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.5rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.calculator-history h3{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1rem}.history-list{display:flex;flex-direction:column;gap:.8rem}.history-item{background:#fff;padding:.8rem 1rem;border-radius:8px;font-family:Courier New,monospace;font-size:.95rem;color:#333;border:1px solid rgba(102,126,234,.1)}.color-picker-container{display:flex;flex-direction:column;gap:2rem}.color-preview-section{background:linear-gradient(135deg,#667eea08,#764ba208);padding:2rem;border-radius:20px;border:2px solid rgba(102,126,234,.1);text-align:center}.color-preview-large{width:100%;height:200px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px #00000026;margin-bottom:1.5rem;transition:all .3s ease}.color-preview-large:hover{transform:scale(1.02);box-shadow:0 12px 40px #0003}.color-value-large{font-size:2.5rem;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);font-family:Courier New,monospace}.color-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.color-formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.color-format-card{background:#fff;padding:1.5rem;border-radius:16px;border:2px solid rgba(102,126,234,.1);transition:all .3s ease}.color-format-card:hover{border-color:#667eea4d;box-shadow:0 8px 30px #667eea1a}.color-format-card h3{color:#333;font-weight:600;font-size:1.1rem;margin-bottom:1rem}.rgb-inputs,.hsl-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem}.rgb-inputs .input-group,.hsl-inputs .input-group{display:flex;flex-direction:column;gap:.3rem}.rgb-inputs label,.hsl-inputs label{font-size:.85rem;font-weight:600;color:#666}.color-input{width:100%;padding:.7rem 1rem;border:2px solid #ddd;border-radius:8px;font-size:1rem;transition:all .3s ease;background:#fff;font-family:Courier New,monospace}.color-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a}.color-input.small{padding:.5rem .7rem;font-size:.95rem}.format-value{background:linear-gradient(135deg,#667eea0d,#764ba20d);padding:.8rem;border-radius:8px;font-family:Courier New,monospace;font-size:.95rem;color:#333;margin-bottom:.8rem;word-break:break-all}.color-adjustment{background:linear-gradient(135deg,#667eea08,#764ba208);padding:1.5rem;border-radius:20px;border:2px solid rgba(102,126,234,.1)}.color-adjustment h3{color:#333;font-weight:600;font-size:1.15rem;margin-bottom:1rem}.adjustment-buttons{display:flex;gap:1rem;justify-content:center}.adjustment-btn{padding:.8rem 2rem;border:2px solid rgba(102,126,234,.2);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;font-size:1rem;transition:all .3s ease}.adjustment-btn:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 15px #667eea4d}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-attachment:fixed;min-height:100vh;color:#333}#root{min-height:100vh}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2,#667eea)}