*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f7fa;color:#333}.app{max-width:1060px;margin:0 auto;padding:32px 24px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.header h1{font-size:22px;font-weight:700}.subtitle{font-weight:400;color:#999;font-size:16px}.sub{font-size:13px;color:#999;margin-top:2px}.key-section{margin-bottom:20px;padding:14px 18px;background:#fff;border-radius:8px;border:1px solid #e8eaed;display:flex;align-items:center;gap:12px}.key-section .label{font-size:13px;font-weight:600;white-space:nowrap;color:#666}.key-section input{flex:1;padding:8px 12px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;font-family:monospace;outline:none}.key-section input:focus{border-color:#4a90d9}.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}.panel{background:#fff;border-radius:8px;border:1px solid #e8eaed;overflow:hidden;display:flex;flex-direction:column}.panel-header{padding:12px 16px;font-size:13px;font-weight:600;color:#666;border-bottom:1px solid #e8eaed;background:#fafbfc;display:flex;justify-content:space-between;align-items:center}.panel-body{flex:1;padding:16px}textarea{width:100%;height:360px;border:none;resize:vertical;font-size:14px;line-height:1.8;font-family:inherit;outline:none}.result-area{height:360px;overflow-y:auto;font-size:14px;line-height:1.8;white-space:pre-wrap;word-break:break-all}.result-area.placeholder{color:#ccc}.char-count{font-size:11px;color:#aaa}.char-count.warn{color:#d94040}.success-tag{font-size:12px;color:#07c160}.progress-wrap{margin-bottom:16px}.progress-bar{height:4px;background:#e8eaed;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:#4a90d9;transition:width .3s;border-radius:2px}.progress-label{font-size:12px;color:#999;margin-top:4px}.stats{display:flex;gap:14px;flex-wrap:wrap;padding:12px 16px;background:#fff;border-radius:8px;border:1px solid #e8eaed;margin-top:16px}.stat{font-size:12px;color:#666}.stat b{color:#333;font-size:14px}.tip{font-size:12px;color:#999;margin-top:4px}.contact-section{margin-top:40px;padding:28px;background:#fff;border-radius:8px;border:1px solid #e8eaed;text-align:center}.contact-section h3{font-size:16px;margin-bottom:8px;color:#333}.contact-desc{color:#999;font-size:13px;margin-bottom:20px}.wx-info{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap}.wx-id{font-size:18px;font-weight:700;color:#07c160;background:#f0fdf4;padding:10px 24px;border-radius:8px;border:1px dashed #07c160}.qr-placeholder{width:140px;height:140px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:12px;text-align:center}.qr-placeholder img{width:100%;height:100%;object-fit:contain;border-radius:8px}.contact-email{color:#bbb;font-size:12px;margin-top:16px}@media (max-width: 768px){.main-grid{grid-template-columns:1fr}.key-section{flex-wrap:wrap}}