:root{--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--radius:10px;--transition:0.2s cubic-bezier(0.4,0,0.2,1)}
[data-theme="dark"]{--bg:#0A0A12;--bg2:#12121E;--bg-card:rgba(18,18,30,0.8);--bg-input:rgba(30,30,48,0.6);--border:rgba(148,163,184,0.1);--text:#F1F5F9;--text2:#94A3B8;--text3:#64748B;--accent1:#F97316;--accent2:#8B5CF6;--accent-green:#34D399;--accent-red:#F87171;--gradient:linear-gradient(135deg,#F97316,#8B5CF6);--glass:rgba(10,10,18,0.6)}
[data-theme="light"]{--bg:#F8FAFC;--bg2:#FFFFFF;--bg-card:rgba(255,255,255,0.9);--bg-input:rgba(241,245,249,0.8);--border:rgba(148,163,184,0.2);--text:#0F172A;--text2:#475569;--text3:#94A3B8;--accent1:#EA580C;--accent2:#7C3AED;--accent-green:#10B981;--accent-red:#EF4444;--gradient:linear-gradient(135deg,#EA580C,#7C3AED);--glass:rgba(248,250,252,0.6)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.app{display:flex;flex-direction:column;min-height:100vh}
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--glass);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-left{display:flex;align-items:center;gap:12px}
.header-right{display:flex;align-items:center;gap:8px}
.logo{display:flex;align-items:center;gap:10px}
.logo h1{font-size:1.1rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:.82rem;font-weight:500;padding:8px 14px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--gradient);color:#fff;border:none;box-shadow:0 2px 8px rgba(249,115,22,.2)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(249,115,22,.35)}
.btn-secondary{background:var(--bg-input);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover:not(:disabled){border-color:var(--accent2)}
.btn-ghost{background:transparent;color:var(--text2)}.btn-ghost:hover:not(:disabled){color:var(--text);background:var(--bg-input)}
.toolbar{display:flex;align-items:center;gap:8px;padding:10px 24px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.panels{flex:1;display:flex;overflow:hidden}
.panel{flex:1;display:flex;flex-direction:column;overflow:hidden}
.panel-label{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg-card)}
.label-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:4px}
.label-tag.html{background:rgba(249,115,22,.12);color:var(--accent1)}
.label-tag.md{background:rgba(139,92,246,.12);color:var(--accent2)}
.char-count{font-size:.72rem;color:var(--text3);font-family:var(--font-mono)}
.editor{flex:1;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;padding:16px;background:var(--bg2);color:var(--text);border:none;outline:none;resize:none}
.editor::placeholder{color:var(--text3)}
.editor.output{background:var(--bg)}
.divider{display:flex;align-items:center;justify-content:center;width:40px;flex-shrink:0;color:var(--text3);border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--bg-card)}
.toast-container{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);font-size:.82rem;animation:toastIn .3s ease}
.toast.success{border-left:3px solid var(--accent-green)}.toast.error{border-left:3px solid var(--accent-red)}.toast.info{border-left:3px solid var(--accent2)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
[data-theme="dark"] .icon-moon{display:none}[data-theme="dark"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:block}[data-theme="light"] .icon-sun{display:none}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@media(max-width:768px){.panels{flex-direction:column}.divider{width:100%;height:32px;border-left:none;border-right:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.divider svg{transform:rotate(90deg)}.toolbar{gap:6px}.header{padding:10px 16px}}