.latex-renderer-ui{--color-primary: #7c3aed;--color-primary-hover: #6d28d9;--color-accent: #06b6d4;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-bg-card: rgba(255, 255, 255, .9);--color-border: #e2e8f0;--color-text-main: #0f172a;--color-text-muted: #64748b;--color-text-code: #6d28d9;--color-bg-input: #fff;--color-bg-preview: #f8fafc;--color-bg-actions: #f1f5f9;--color-white: #fff;--shadow-main: rgba(0, 0, 0, .06);--shadow-preview: rgba(124, 58, 237, .08)}.theme-dark .latex-renderer-ui{--color-bg-card: #1e1e2e;--color-border: #313244;--color-text-main: #cdd6f4;--color-text-muted: #a6adc8;--color-text-code: #cba6f7;--color-bg-input: #11111b;--color-bg-preview: #181825;--color-bg-actions: #1e1e2e;--color-white: #fff;--shadow-main: rgba(0, 0, 0, .3);--shadow-preview: rgba(124, 58, 237, .15)}.latex-renderer-container{max-width:1200px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:420px 1fr;gap:2rem;background:var(--color-bg-card);border-radius:1.5rem;border:1px solid var(--color-border);box-shadow:0 10px 30px var(--shadow-main);transition:all .3s ease}.editor-panel{display:flex;flex-direction:column;gap:1.5rem}.panel-section{display:flex;flex-direction:column;gap:.75rem}.panel-section:not(:last-child){padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.section-label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}.latex-textarea{width:100%;min-height:180px;padding:1rem;background:var(--color-bg-input);border:1.5px solid var(--color-border);border-radius:.875rem;color:var(--color-text-main);font-size:.95rem;line-height:1.7;resize:vertical;transition:border-color .2s,box-shadow .2s;box-sizing:border-box}.latex-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--shadow-preview)}.mode-toggle-row{display:flex;gap:.5rem}.mode-btn{flex:1;padding:.5rem 1rem;border-radius:.625rem;border:1.5px solid var(--color-border);background:var(--color-bg-input);color:var(--color-text-muted);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}.mode-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.mode-btn.mode-active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.font-size-row{display:flex;align-items:center;gap:.75rem}.font-size-row input[type=range]{flex:1;accent-color:var(--color-primary);cursor:pointer}.font-size-display{min-width:3rem;text-align:right;font-size:.85rem;font-weight:600;color:var(--color-text-main)}.btn-reset-small{width:100%;padding:.625rem 1rem;background:transparent;border:1.5px solid var(--color-border);border-radius:.75rem;color:var(--color-text-muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-reset-small:hover{border-color:var(--color-error);color:var(--color-error)}.preview-panel{display:flex;flex-direction:column;gap:1.25rem}.preview-header{display:flex;align-items:center;justify-content:space-between}.preview-title{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}.preview-badge{display:flex;align-items:center;gap:.35rem;padding:.25rem .625rem;background:var(--color-primary);border-radius:999px;font-size:.7rem;font-weight:700;color:var(--color-white);letter-spacing:.04em}.preview-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--color-white);opacity:.8;animation:pulse-dot 1.8s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:.8;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}.preview-box{flex:1;min-height:220px;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--color-bg-preview);border:1.5px solid var(--color-border);border-radius:1.25rem;box-shadow:0 4px 20px var(--shadow-preview);overflow:auto;position:relative;transition:all .2s}.preview-empty-hint{color:var(--color-text-muted);font-size:.9rem;font-style:italic;text-align:center}.preview-error-banner{padding:.875rem 1rem;background:#ef444414;border:1px solid rgba(239,68,68,.3);border-radius:.75rem;color:var(--color-error);font-size:.85rem;overflow-wrap:anywhere;display:none}.actions-bar{display:flex;gap:.75rem;padding:1.25rem;background:var(--color-bg-actions);border-radius:1rem;border:1px solid var(--color-border)}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:.75rem;border:1.5px solid transparent;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}.action-btn:disabled{opacity:.5;cursor:not-allowed}.action-btn-png{background:var(--color-primary);color:var(--color-white)}.action-btn-png:not(:disabled):hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow-preview)}.action-btn-md{background:var(--color-bg-input);border-color:var(--color-border);color:var(--color-text-main)}.action-btn-md:not(:disabled):hover{border-color:var(--color-accent);color:var(--color-accent)}.action-btn-latex{background:var(--color-bg-input);border-color:var(--color-border);color:var(--color-text-code)}.action-btn-latex:not(:disabled):hover{border-color:var(--color-text-code);box-shadow:0 2px 8px var(--shadow-main)}.latex-toast{position:fixed;bottom:2rem;right:2rem;padding:.75rem 1.25rem;background:var(--color-success);color:var(--color-white);border-radius:.75rem;font-size:.875rem;font-weight:600;box-shadow:0 4px 16px #10b9814d;opacity:0;transform:translateY(.5rem);pointer-events:none;transition:opacity .25s,transform .25s;z-index:100}.latex-toast.toast-visible{opacity:1;transform:translateY(0)}@media(max-width:900px){.latex-renderer-container{grid-template-columns:1fr;padding:1.25rem}}@keyframes view-fade-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.view-fade-in{animation:view-fade-in .35s ease both}