:root{--page-bg: #f4f6fb;--text-color: #111827;--muted-color: #6b7280;--box-bg: #ffffff;--border-color: #e6e9ee;--accent: #0b74ff}body.dark{--page-bg: #0f1113;--text-color: #e6eef8;--muted-color: #9aa4b2;--box-bg: #171717;--border-color: #2b2b2b;--accent: #4aa3ff}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--page-bg);color:var(--text-color);transition:background .35s ease,color .35s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-shell{width:92%;max-width:1000px;margin:2rem auto;display:flex;flex-direction:column;gap:1rem}.app-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--box-bg);border-radius:12px;border:1px solid var(--border-color);box-shadow:0 6px 18px #0206170f}.app-title{font-size:1.25rem;font-weight:600;color:var(--text-color)}.theme-toggle{background:transparent;border:1px solid var(--border-color);color:var(--text-color);padding:.5rem .6rem;border-radius:8px;cursor:pointer;transition:transform .18s ease,background .25s ease;display:inline-flex;align-items:center;justify-content:center}.theme-toggle:hover{transform:rotate(8deg) scale(1.05)}.main-wrapper{width:100%}.converter-shell{display:flex;flex-direction:column;gap:1rem}.converter-container{display:flex;gap:1rem;padding:1rem;background:var(--box-bg);border-radius:12px;border:1px solid var(--border-color);box-shadow:0 10px 36px #0206170f;transition:background .3s ease,transform .25s ease;min-height:56vh}.markdown-input{width:50%;min-height:100%;resize:none;padding:1rem;border-radius:10px;border:1px solid var(--border-color);background:transparent;color:var(--text-color);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,Courier New,monospace;font-size:.95rem;outline:none;transition:color .25s ease,background .25s ease,border .2s ease}.markdown-input::placeholder{color:var(--muted-color);opacity:.9}.markdown-preview{width:50%;padding:1rem;border-radius:10px;border:1px dashed var(--border-color);background:transparent;color:var(--text-color);overflow-y:auto;transition:color .25s ease}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3{color:var(--text-color);margin-bottom:.5rem}.markdown-preview p{color:var(--text-color);margin-bottom:.6rem;line-height:1.5}.markdown-preview code{display:inline-block;background:#0000000a;padding:.18rem .36rem;border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace}.markdown-preview pre{background:#0b1220;color:#f8f8f2;padding:1rem;border-radius:8px;overflow:auto}.export-section{margin-top:.6rem;display:flex;justify-content:center;align-items:center;gap:1rem}.export-section h3{margin-right:.5rem;color:var(--muted-color);font-weight:600}.export-buttons{display:flex;gap:.6rem}.export-buttons button{padding:.6rem .7rem;border-radius:10px;border:1px solid var(--border-color);background:var(--box-bg);color:var(--text-color);cursor:pointer;transition:transform .18s ease,background .25s ease;display:inline-flex;align-items:center;justify-content:center}.export-buttons button:hover{transform:translateY(-3px) scale(1.03);background:var(--page-bg)}@media (max-width: 768px){.converter-container{flex-direction:column;min-height:50vh}.markdown-input,.markdown-preview{width:100%;min-height:240px}.app-shell{margin:1rem auto}}