/* styles.css - 样式文件 */
.container{background:#fff;border-radius:20px;width:100%;max-width:900px;padding:40px;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-20px)}
to{opacity:1;transform:translateY(0)}
}
.header{text-align:center;margin-bottom:30px}
.header h1{color:#333;font-size:2.5em;margin-bottom:10px;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.header p{color:#666;font-size:1.1em;opacity:.8}
.main-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px}
@media (max-width:768px){.main-content{grid-template-columns:1fr;gap:20px}
.container{padding:20px}
.header h1{font-size:2em}
.conversion-options{padding:0!important;background:0 0!important}
}
.input-section,.output-section{display:flex;flex-direction:column}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.section-title h3{color:#333;font-size:1.3em;font-weight:600}
.text-counter{color:#888;font-size:.9em;font-family:monospace}
.text-area{flex:1;min-height:300px;padding:20px;border:2px solid #e1e5e9;border-radius:15px;font-size:16px;line-height:1.6;resize:vertical;transition:all .3s ease;background:#f8f9fa;font-family:inherit}
.text-area:focus{outline:0;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)}
.text-area:read-only{background:#f0f2f5}
.conversion-options{display:flex;gap:15px;margin-bottom:25px;padding:20px;background:#f8f9fa;border-radius:15px;flex-wrap:wrap}
.radio-group{display:flex;gap:10px;flex-wrap:wrap}
.radio-option{position:relative}
.radio-option input[type=radio]{display:none}
.radio-option label{padding:12px 24px;background:#fff;border:2px solid #e1e5e9;border-radius:8px;cursor:pointer;transition:all .3s ease;display:block;text-align:center;min-width:140px;font-weight:500;user-select:none}
.radio-option input[type=radio]:checked+label{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;border-color:#667eea;box-shadow:0 5px 15px rgba(102,126,234,.3)}
.radio-option label:hover{border-color:#667eea;transform:translateY(-2px)}
.controls{display:flex;flex-wrap:wrap;gap:15px;margin-top:20px;padding-top:20px;border-top:1px solid #eee}
.btn{padding:14px 28px;border:none;border-radius:10px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;font-family:inherit;user-select:none}
.btn-primary{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;font-weight:600}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px rgba(102,126,234,.3)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-secondary{background:#f1f3f9;color:#555}
.btn-secondary:hover{background:#e4e7f2;transform:translateY(-2px)}
.btn-icon{font-size:18px;display:inline-flex;align-items:center}
.toast{position:fixed;top:20px;right:20px;padding:16px 24px;background:#fff;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.2);display:flex;align-items:center;gap:12px;transform:translateX(150%);transition:transform .3s cubic-bezier(.68, -.55, .265, 1.55);z-index:1000;min-width:300px;max-width:400px}
.toast.show{transform:translateX(0)}
.toast.success{border-left:4px solid #4caf50}
.toast.error{border-left:4px solid #f44336}
.toast.info{border-left:4px solid #2196f3}
.toast-icon{font-size:20px;flex-shrink:0}
.toast-message{flex:1;font-size:14px}
.loading{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);justify-content:center;align-items:center;z-index:1001;backdrop-filter:blur(3px)}
.loading.show{display:flex}
.spinner{width:60px;height:60px;border:5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:30px;padding:30px;background:linear-gradient(135deg,#f5f7fa 0,#c3cfe2 100%);border-radius:15px}
.feature{text-align:center;padding:25px;background:#fff;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.05);transition:all .3s ease}
.feature:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.1)}
.feature-icon{font-size:36px;color:#667eea;margin-bottom:15px;display:block}
.feature h4{color:#333;margin-bottom:12px;font-size:1.2em;font-weight:600}
.feature p{color:#666;font-size:.95em;line-height:1.5}
.status-indicator{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#666;padding:4px 8px;background:#f0f2f5;border-radius:4px;margin-left:10px}
.status-indicator::before{content:'';width:8px;height:8px;border-radius:50%;background:#4caf50}
.status-indicator.ready::before{background:#4caf50}
.status-indicator.error::before{background:#f44336}
.keyboard-hint{font-size:12px;color:#888;margin-top:4px;display:block}
@media (max-width:480px){.btn{padding:12px 20px;font-size:14px}
.radio-option label{min-width:120px;padding:10px 16px}
.toast{min-width:250px;max-width:300px;left:20px;right:20px}
}