@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap);*{box-sizing:border-box;margin:0;padding:0}.converter-container{font-family:Noto Sans SC,sans-serif;max-width:100%;padding:20px;color:#333;min-height:100vh;background-color:#f5f7fa;display:flex;flex-direction:column;align-items:center}.title{text-align:center;margin-bottom:24px;color:#2c3e50;font-weight:700;font-size:1.8rem}.converter-card{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);width:100%;max-width:900px;overflow:hidden}.tabs{display:flex;border-bottom:1px solid #eaeaea}.tab-button{flex:1;padding:16px;background:none;border:none;cursor:pointer;font-size:1rem;font-weight:500;color:#666;transition:all .3s ease;position:relative}.tab-button:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:transparent;transition:all .3s ease}.tab-button:hover{color:#409eff;background-color:#f8fafc}.tab-button.active{color:#409eff;font-weight:600}.tab-button.active:after{background-color:#409eff}.content{padding:24px}.tab-content{display:flex;flex-direction:column;gap:24px}.upload-area{border:2px dashed #ccc;border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background-color:#f8fafc;min-height:500px}.upload-area:hover{border-color:#409eff;background-color:#f0f7ff}.file-input{display:none}.upload-label{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer}.upload-icon{color:#409eff;margin-bottom:8px}.upload-text{font-size:1.1rem;font-weight:500;color:#2c3e50}.upload-hint{font-size:.9rem;color:#7f8c8d}.preview-section,.result-section{border:1px solid #eaeaea;border-radius:8px;overflow:hidden}.result-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background-color:#f8f9fa;border-bottom:1px solid #eaeaea}.action-buttons{display:flex;gap:8px}.action-button{display:flex;align-items:center;gap:6px;padding:6px 12px;background-color:#409eff;color:#fff;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background-color .2s}.action-button:hover{background-color:#2980b9}.action-button svg{fill:currentColor}.csv-preview,.json-preview{max-height:400px;overflow-y:auto;padding:16px;background-color:#f8f9fa;font-family:Courier New,Courier,monospace;font-size:.9rem;line-height:1.5;white-space:pre-wrap}.input-area{margin-bottom:16px}.json-textarea{width:100%;min-height:400px;padding:12px;border:1px solid #ddd;border-radius:6px;font-family:Courier New,Courier,monospace;font-size:.95rem;resize:vertical;transition:border-color .3s}.json-textarea:focus{outline:none;border-color:#409eff;box-shadow:0 0 0 2px rgba(52,152,219,.2)}.controls{display:flex;gap:12px;margin-bottom:16px}.convert-button,.download-button{padding:10px 20px;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.convert-button{background-color:#409eff;color:#fff}.convert-button:hover{background-color:#2980b9}.convert-button:disabled{background-color:#95a5a6;cursor:not-allowed}.download-button{background-color:#2ecc71;color:#fff}.download-button:hover{background-color:#27ae60}.error-message{color:#e74c3c;padding:10px;background-color:#fdecea;border-radius:4px;margin-top:10px}.notification{position:fixed;bottom:20px;right:20px;padding:12px 24px;border-radius:6px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:slideIn .3s ease-out;z-index:1000}.notification.success{background-color:#2ecc71}.notification.error{background-color:#e74c3c}@keyframes slideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:768px){.converter-card{border-radius:0}.tabs{flex-direction:column}.tab-button{padding:12px}.content{padding:16px}.action-buttons{gap:6px}.action-buttons,.controls{flex-direction:column}.convert-button,.download-button{width:100%}}