.mdxf-section{margin-bottom:1.5rem;}
.mdxf-card{background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:12px;overflow:hidden;box-shadow:var(--shadow-soft,0 2px 12px rgba(0,0,0,.06));-webkit-tap-highlight-color:transparent;}
.mdxf-layout{display:flex;flex-direction:column;gap:0;}
.mdxf-source,.mdxf-output{display:flex;flex-direction:column;min-height:0;}
.mdxf-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px 12px;background:var(--surface-muted,rgba(0,0,0,.03));border-bottom:1px solid var(--border,rgba(0,0,0,.08));}
.mdxf-bar-output{border-bottom:none;}
.mdxf-label{font-size:0.8125rem;font-weight:600;color:var(--text-muted,#6b7280);}
.mdxf-actions{display:flex;align-items:center;gap:6px;}
.mdxf-btn{font-size:0.8125rem;font-weight:500;padding:6px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent;}
.mdxf-btn:active{transform:scale(0.98);}
.mdxf-btn-primary{background:var(--primary,#2563eb);color:#fff;}
.mdxf-btn-primary:hover{background:var(--primary-dark,#1d4ed8);}
.mdxf-btn-ghost{background:transparent;color:var(--text-muted,#6b7280);}
.mdxf-btn-ghost:hover{background:var(--surface-muted,rgba(0,0,0,.06));color:var(--text-main,#111);}
.mdxf-btn-outline{background:var(--surface,#fff);color:var(--text-main,#111);border:1px solid var(--border,rgba(0,0,0,.15));}
.mdxf-btn-outline:hover{background:var(--surface-muted,rgba(0,0,0,.04));border-color:var(--border,rgba(0,0,0,.25));}
.mdxf-editor-wrap{min-height:260px;}
.mdxf-editor{width:100%;min-height:260px;}
.mdxf-opts-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 12px;background:var(--surface,#fff);border-bottom:1px solid var(--border,rgba(0,0,0,.08));}
.mdxf-opt{display:inline-flex;align-items:center;gap:6px;}
.mdxf-opt-label{font-size:0.75rem;font-weight:500;color:var(--text-muted,#6b7280);}
.mdxf-select{font-size:0.8125rem;padding:4px 8px;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:6px;background:var(--surface,#fff);color:var(--text-main,#111);}
.ace_editor.mdxf-editor-readonly .ace_cursor{display:none;}
@media (min-width:480px){.mdxf-bar{padding:12px 14px;}.mdxf-btn{padding:8px 14px;font-size:0.875rem;}.mdxf-editor-wrap{min-height:320px;}.mdxf-editor{min-height:320px;}.mdxf-opts-row{padding:12px 14px;}}
@media (min-width:768px){.mdxf-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;grid-template-areas:"source output""opts opts";gap:0;min-height:420px;}
.mdxf-source{grid-area:source;border-right:1px solid var(--border,rgba(0,0,0,.08));display:flex;flex-direction:column;}
.mdxf-output{grid-area:output;display:flex;flex-direction:column;}
.mdxf-opts-row{grid-area:opts;}
.mdxf-source .mdxf-editor-wrap,.mdxf-output .mdxf-editor-wrap{flex:1;min-height:320px;}
.mdxf-editor-wrap{min-height:380px;}
.mdxf-editor{min-height:380px;}
.mdxf-bar-output{border-bottom:1px solid var(--border,rgba(0,0,0,.08));}
@media (min-width:992px){.mdxf-editor-wrap{min-height:420px;}.mdxf-editor{min-height:420px;}}