*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}.app{max-width:1100px;margin:0 auto;padding:20px}.app-header{text-align:center;color:#fff;background:linear-gradient(135deg,#4472c4,#5b9bd5);border-radius:12px;margin-bottom:24px;padding:30px 20px}.app-header h1{margin-bottom:8px;font-size:28px}.app-header p{opacity:.9;font-size:14px}.tab-nav{background:#fff;border-radius:10px;flex-wrap:wrap;gap:4px;margin-bottom:24px;padding:6px;display:flex;box-shadow:0 1px 3px #00000014}.tab-btn{cursor:pointer;color:#666;white-space:nowrap;background:0 0;border:none;border-radius:8px;flex:1;min-width:120px;padding:10px 16px;font-size:14px;transition:all .2s}.tab-btn:hover{color:#333;background:#f5f5f5}.tab-btn.active{color:#fff;background:#4472c4;font-weight:500}.panel h2{color:#1a1a1a;margin-bottom:16px;font-size:20px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #00000014}.desc{color:#666;margin-bottom:16px;font-size:14px}.upload-area{text-align:center;cursor:pointer;border:2px dashed #d9d9d9;border-radius:10px;margin-bottom:20px;padding:40px;transition:all .3s}.upload-area:hover{background:#f8faff;border-color:#4472c4}.upload-icon{margin-bottom:12px;font-size:48px}.hint{color:#999;margin-top:8px;font-size:12px}.progress-bar{margin:16px 0}.progress-track{background:#e8e8e8;border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#4472c4,#5b9bd5);border-radius:4px;height:100%;transition:width .3s}.progress-text{color:#666;margin-top:4px;font-size:12px;display:block}.result-box{border-radius:8px;margin:16px 0;padding:16px}.result-box.success{background:#f6ffed;border:1px solid #b7eb8f}.result-box.error{background:#fff2f0;border:1px solid #ffccc7}.result-header{align-items:center;gap:8px;margin-bottom:8px;display:flex}.result-stats{color:#666;gap:20px;font-size:13px;display:flex}.btn-group{flex-wrap:wrap;gap:12px;margin:16px 0;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:14px;transition:all .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{color:#fff;background:#4472c4}.btn-primary:hover:not(:disabled){background:#3a63a8}.btn-secondary{color:#333;background:#f0f0f0}.btn-secondary:hover:not(:disabled){background:#e0e0e0}.btn-sm{color:#fff;cursor:pointer;background:#4472c4;border:none;border-radius:6px;padding:6px 14px;font-size:12px}.preview-section{margin-top:20px}.preview-section h3{color:#333;margin-bottom:12px;font-size:16px}.table-wrapper{border:1px solid #e8e8e8;border-radius:8px;overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:13px}.data-table th{color:#fff;text-align:left;white-space:nowrap;background:#4472c4;padding:10px 14px;font-weight:500}.data-table td{border-bottom:1px solid #f0f0f0;padding:8px 14px}.data-table tbody tr:hover{background:#f8faff}.complex-table th{text-align:center}.desc-row td{font-size:12px;font-style:italic;color:#888!important;background:#f5f5f5!important}.export-options{flex-wrap:wrap;gap:20px;margin-bottom:16px;display:flex}.format-desc{color:#666;background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;margin-bottom:12px;padding:8px 12px;font-size:13px}.format-tag{border-radius:4px;margin-right:4px;padding:1px 8px;font-size:11px;font-weight:500;display:inline-block}.styled-tag{color:#1890ff;background:#e6f7ff}.plain-tag{color:#fa8c16;background:#fff7e6}.image-tag{color:#722ed1;background:#f9f0ff}.preview-hint{color:#888;margin-bottom:8px;font-size:13px}.plain-preview th{color:#333!important;background:#f5f5f5!important;font-weight:400!important}.plain-th{color:#333!important;background:#f5f5f5!important;border:1px solid #e8e8e8!important;font-weight:400!important}.plain-preview td{border:1px solid #e8e8e8!important}.image-preview{margin-top:12px}.image-preview-box{background:#fafafa;border:1px dashed #d9d9d9;border-radius:8px;align-items:center;gap:12px;padding:12px;display:flex}.preview-img{border:1px solid #e8e8e8;border-radius:4px;max-height:60px}.image-label{color:#888;font-size:12px}.row-preview-img{object-fit:cover;border:1px solid #e8e8e8;border-radius:3px;width:30px;height:22px}.option-group{align-items:center;gap:8px;display:flex}.option-group label{color:#666;white-space:nowrap;font-size:14px}.option-group select{background:#fff;border:1px solid #d9d9d9;border-radius:6px;padding:8px 12px;font-size:14px}.error-section{margin-top:16px}.error-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.error-header h3{color:#ff4d4f;font-size:16px}.error-table td:nth-child(3){color:#ff4d4f}.complex-preview{margin-bottom:20px}.converter-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.converter-item{background:#fafafa;border:1px solid #e8e8e8;border-radius:8px;padding:16px}.converter-item h4{color:#4472c4;border-bottom:1px solid #e8e8e8;margin-bottom:12px;padding-bottom:8px;font-size:14px}.converter-row{align-items:center;gap:12px;display:flex}.input-side,.output-side{flex:1}.input-side label,.output-side label{color:#999;margin-bottom:4px;font-size:11px;display:block}.input-side code,.output-side code{color:#333;margin-bottom:4px;font-size:13px;display:block}.arrow{color:#4472c4;font-size:20px;font-weight:700}.type-tag{color:#4472c4;background:#e8f4ff;border-radius:4px;padding:2px 8px;font-size:11px;display:inline-block}.app-footer{text-align:center;color:#999;margin-top:40px;padding:20px;font-size:12px}@media (width<=768px){.app{padding:12px}.app-header h1{font-size:20px}.tab-btn{min-width:80px;padding:8px 10px;font-size:12px}.card{padding:16px}.converter-grid{grid-template-columns:1fr}}.benchmark-config{flex-wrap:wrap;gap:20px;margin-bottom:16px;display:flex}.bench-result{margin-top:24px}.bench-result h3{margin-bottom:16px;font-size:18px}.bench-summary{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px;display:grid}.bench-card{text-align:center;border-radius:10px;padding:20px}.bench-card.naive{background:linear-gradient(135deg,#fff5f5,#ffe8e8);border:1px solid #ffccc7}.bench-card.optimized{background:linear-gradient(135deg,#f0fff4,#d9f7be);border:1px solid #b7eb8f}.bench-card-label{margin-bottom:8px;font-size:14px}.bench-card-value{margin-bottom:12px;font-size:32px;font-weight:700}.bench-card.naive .bench-card-value{color:#ff4d4f}.bench-card.optimized .bench-card-value{color:#52c41a}.bench-card-detail{color:#666;flex-direction:column;gap:4px;font-size:12px;display:flex}.bench-comparison{margin-bottom:24px}.bench-comparison h4{margin-bottom:12px;font-size:15px}.bench-bars{flex-direction:column;gap:16px;display:flex}.bench-bar-group{grid-template-columns:80px 1fr;align-items:start;gap:4px;display:grid}.bench-bar-group-size{border-top:1px dashed #d9d9d9;margin-top:12px;padding-top:16px}.bench-bar-label{color:#666;text-align:right;padding-top:10px;padding-right:8px;font-size:13px}.total-label{color:#333;font-weight:700}.bench-bar-pair{flex-direction:column;gap:4px;display:flex}.bench-bar-row{align-items:center;gap:6px;display:flex}.bench-bar-tag{text-align:center;border-radius:3px;flex-shrink:0;width:28px;padding:1px 0;font-size:11px}.naive-tag{color:#ff4d4f;background:#fff1f0}.optimized-tag{color:#52c41a;background:#f6ffed}.bench-bar-track{flex:1;min-width:0}.bench-bar{border-radius:4px;align-items:center;min-width:36px;height:24px;padding:0 8px;transition:width .5s;display:flex}.naive-bar{background:linear-gradient(90deg,#ff7875,#ff4d4f)}.optimized-bar{background:linear-gradient(90deg,#95de64,#52c41a)}.total-bar{height:28px}.bench-bar-text{color:#fff;white-space:nowrap;font-size:11px;font-weight:500}.bench-legend{justify-content:center;gap:20px;margin-top:12px;display:flex}.legend-item{color:#666;align-items:center;gap:6px;font-size:13px;display:flex}.legend-dot{border-radius:3px;width:12px;height:12px;display:inline-block}.naive-dot{background:#ff4d4f}.optimized-dot{background:#52c41a}.bench-speedup{justify-content:center;gap:16px;margin:24px 0;display:flex}.speedup-badge{text-align:center;background:linear-gradient(135deg,#e6f7ff,#bae7ff);border:2px solid #69c0ff;border-radius:12px;padding:16px 28px}.memory-badge{background:linear-gradient(135deg,#f9f0ff,#efdbff);border-color:#b37feb}.speedup-value{color:#1890ff;font-size:28px;font-weight:700;display:block}.memory-badge .speedup-value{color:#722ed1}.size-badge{background:linear-gradient(135deg,#f6ffed,#d9f7be);border-color:#95de64}.size-badge .speedup-value{color:#389e0d}.speedup-label{color:#666;margin-top:4px;font-size:12px;display:block}.bench-detail{margin-top:20px}.bench-detail h4{margin-bottom:12px;font-size:15px}.total-row{background:#f0f5ff}.ui-test-area{background:linear-gradient(135deg,#f0f5ff,#e6f7ff);border:2px solid #91caff;border-radius:10px;margin:16px 0;padding:16px}.ui-test-header{color:#1a1a1a;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;font-weight:600;display:flex}.ui-test-icon{font-size:18px}.ui-test-body{align-items:center;gap:24px;display:flex}.ui-test-btn{-webkit-user-select:none;user-select:none;color:#fff!important;cursor:pointer!important;background:linear-gradient(135deg,#4472c4,#5b9bd5)!important;border:none!important;border-radius:10px!important;padding:14px 32px!important;font-size:18px!important;font-weight:700!important;transition:transform .1s,box-shadow .1s!important;box-shadow:0 4px 12px #4472c466!important}.ui-test-btn:hover{transform:scale(1.05);box-shadow:0 6px 16px #4472c480!important}.ui-test-btn:active{transform:scale(.95);box-shadow:0 2px 6px #4472c44d!important}.ui-test-counts{flex:1;gap:20px;display:flex}.ui-count-item{border-radius:8px;flex-direction:column;align-items:center;min-width:120px;padding:10px 20px;display:flex}.naive-count{background:#ff4d4f14;border:1px solid #ff4d4f33}.optimized-count{background:#52c41a14;border:1px solid #52c41a33}.ui-count-label{color:#666;margin-bottom:4px;font-size:12px}.ui-count-value{font-size:28px;font-weight:700}.naive-count .ui-count-value{color:#ff4d4f}.optimized-count .ui-count-value{color:#52c41a}.ui-test-hint{color:#888;border-top:1px dashed #b0c4de;margin-top:10px;padding-top:10px;font-size:12px}.bench-ui-result{background:#fafafa;border:1px solid #e8e8e8;border-radius:8px;margin-top:20px;padding:16px}.bench-ui-result h4{margin-bottom:12px;font-size:15px}.ui-result-cards{grid-template-columns:1fr 1fr;gap:12px;display:grid}.ui-result-card{text-align:center;border-radius:8px;padding:16px}.naive-ui-card{background:linear-gradient(135deg,#fff5f5,#ffe8e8);border:1px solid #ffccc7}.optimized-ui-card{background:linear-gradient(135deg,#f0fff4,#d9f7be);border:1px solid #b7eb8f}.ui-result-label{margin-bottom:6px;font-size:13px}.ui-result-value{margin-bottom:6px;font-size:24px;font-weight:700}.naive-ui-card .ui-result-value{color:#ff4d4f}.optimized-ui-card .ui-result-value{color:#52c41a}.ui-result-desc{color:#666;font-size:12px}.bench-tips{background:#fffbe6;border:1px solid #ffe58f;border-radius:8px;margin-top:20px;padding:16px}.bench-tips h4{color:#d48806;margin-bottom:8px;font-size:14px}.bench-tips ul{padding-left:20px}.bench-tips li{color:#666;margin-bottom:6px;font-size:13px;line-height:1.6}.bench-tips code{background:#fff7cc;border-radius:3px;padding:1px 4px;font-size:12px}@media (width<=768px){.bench-summary{grid-template-columns:1fr}.bench-bar-group{grid-template-columns:60px 1fr}.bench-bar-tag{width:22px;font-size:10px}.bench-speedup{flex-direction:column;align-items:center}.ui-test-body{flex-direction:column;gap:12px}.ui-test-counts{width:100%}.ui-result-cards{grid-template-columns:1fr}}