:root{--bg-main:#0f172a;--bg-card:#1e293b;--bg-card-header:#334155;--bg-input:#0b1120;--border-color:#334155;--border-active:#38bdf8;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#38bdf8;--accent-hover:#0ea5e9;--accent-bg:#38bdf81a;--success:#10b981;--success-bg:#10b98126;--danger:#ef4444;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.5}.app-container{flex-direction:column;gap:20px;max-width:1440px;min-height:100vh;margin:0 auto;padding:24px 20px;display:flex}.header{border-bottom:1px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-bottom:16px;display:flex}.header-left{align-items:center;gap:14px;display:flex}.logo-badge{background:linear-gradient(135deg,#38bdf8,#818cf8);border-radius:12px;justify-content:center;align-items:center;width:46px;height:46px;font-size:26px;display:flex;box-shadow:0 4px 12px #38bdf840}.logo-title{letter-spacing:-.02em;background:linear-gradient(90deg,#f8fafc,#94a3b8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:24px;font-weight:700}.logo-subtitle{color:var(--text-secondary);font-size:13px}.header-right{align-items:center;gap:12px;display:flex}.privacy-badge{background-color:var(--accent-bg);color:var(--accent);border:1px solid #38bdf84d;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:500}.lang-switcher{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;align-items:center;gap:4px;padding:4px 8px;display:flex}.lang-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:12px;font-weight:600;transition:all .2s}.lang-btn:hover{color:var(--text-primary)}.lang-btn.active{background-color:var(--accent);color:#0f172a}.lang-divider{color:var(--text-muted);font-size:11px}.toolbar{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-wrap:wrap;align-items:center;gap:16px;padding:14px 18px;display:flex}.toolbar-group{align-items:center;gap:10px;display:flex}.label{color:var(--text-secondary);white-space:nowrap;font-size:13px;font-weight:600}.select{background-color:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;border-radius:8px;outline:none;padding:8px 12px;font-size:13px;transition:border-color .2s}.select:focus{border-color:var(--border-active)}.detected-tag{color:var(--accent);background-color:var(--accent-bg);border:1px solid #38bdf833;border-radius:6px;padding:4px 8px;font-size:12px}.swap-btn{background-color:var(--bg-card-header);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;transition:all .2s}.swap-btn:hover{background-color:var(--accent);color:#0f172a}.format-pills{flex-wrap:wrap;gap:6px;display:flex}.pill-btn{background-color:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500;transition:all .2s}.pill-btn:hover{color:var(--text-primary);border-color:var(--accent)}.pill-btn.active{background-color:var(--accent);color:#0f172a;border-color:var(--accent);font-weight:700}.align-buttons{background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:8px;padding:2px;display:flex}.icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 10px;font-size:12px;transition:all .2s}.icon-btn.active{background-color:var(--bg-card-header);color:var(--accent);font-weight:600}.workspace{flex:1;grid-template-columns:1fr 1fr;gap:20px;display:grid}@media (width<=900px){.workspace{grid-template-columns:1fr}}.panel{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 20px #0003}.panel-header{background-color:var(--bg-card-header);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.panel-title{align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.meta-info{color:var(--text-muted);background-color:var(--bg-input);border-radius:10px;padding:2px 8px;font-size:12px;font-weight:400}.panel-actions{align-items:center;gap:8px;display:flex}.text-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:12px;transition:all .2s}.text-btn:hover{color:var(--text-primary);background-color:#ffffff0d}.text-btn.danger:hover{color:var(--danger)}.tab-group{gap:4px;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:600;transition:all .2s}.tab-btn.active{background-color:var(--bg-input);color:var(--accent)}.copy-btn{color:#0f172a;cursor:pointer;background:linear-gradient(135deg,#38bdf8,#0ea5e9);border:none;border-radius:6px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:700;transition:all .2s;display:flex}.copy-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.copy-btn.copied{background:var(--success);color:#fff}.copy-btn:disabled{opacity:.4;cursor:not-allowed}.download-btn{background-color:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:12px;transition:all .2s}.download-btn:hover:not(:disabled){border-color:var(--accent)}.download-btn:disabled{opacity:.4;cursor:not-allowed}.editor-wrap{flex:1;min-height:480px;display:flex;position:relative}.editor-textarea{background-color:var(--bg-input);width:100%;height:100%;min-height:480px;color:var(--text-primary);font-family:var(--font-mono);resize:vertical;white-space:pre;border:none;outline:none;padding:16px;font-size:13px;line-height:1.6;overflow:auto}.editor-textarea.output-textarea{background-color:#070d18}.preview-wrap{background-color:var(--bg-input);width:100%;padding:16px;overflow:auto}.preview-table{border-collapse:collapse;border:1px solid var(--border-color);width:100%;font-size:13px}.preview-table th,.preview-table td{border:1px solid var(--border-color);padding:10px 14px}.preview-table th{background-color:var(--bg-card-header);color:var(--accent);font-weight:600}.preview-table tbody tr:nth-child(2n){background-color:#ffffff05}.preview-table tbody tr:hover{background-color:#38bdf80d}.empty-preview{height:100%;color:var(--text-muted);justify-content:center;align-items:center;font-size:14px;display:flex}.error-box{color:var(--danger);background-color:#ef44441a;gap:12px;width:100%;padding:20px;display:flex}.footer{flex-direction:column;gap:16px;margin-top:10px;display:flex}.tips-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:10px;padding:16px 20px}.tips-card h3{color:var(--accent);margin-bottom:8px;font-size:14px}.tips-card ul{color:var(--text-secondary);flex-direction:column;gap:4px;padding-left:20px;font-size:13px;display:flex}.tips-card kbd{background-color:var(--bg-card-header);color:var(--text-primary);font-family:var(--font-mono);border:1px solid var(--border-color);border-radius:4px;padding:2px 6px;font-size:11px}.copyright{color:var(--text-muted);border-top:1px solid #ffffff0d;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:8px;font-size:12px;display:flex}