.af{--af-r: 10px;--af-b: 1px solid var(--border, rgba(0,0,0,0.08));--af-bg: var(--surface,#fff);--af-bg-alt: #f6f8fa;--af-fg: var(--text-main,#111);--af-muted: var(--text-muted,#666);--af-pri: #c41e3a;--af-pri-h: #a01830;--af-acc: #0d9488;--af-acc-h: #0f766e;--af-h: min(320px,60vh);background: var(--af-bg);border: var(--af-b);border-radius: var(--af-r);box-shadow: 0 2px 8px rgba(0,0,0,0.06);overflow: hidden;margin-bottom: 2rem;}
.af-bar{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 10px 16px;padding: 12px 16px;background: var(--af-bg-alt);border-bottom: var(--af-b);}
.af-bar-group{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;}
.af-bar-left{order: 1;}
.af-bar-seg{order: 3;width: 100%;justify-content: center;}
.af-bar-right{order: 2;margin-left: auto;}
.af-btn{padding: 8px 14px;font-size: 0.8125rem;font-weight: 600;border: none;border-radius: 6px;cursor: pointer;transition: background 0.2s,color 0.2s;}
.af-btn:focus-visible{outline: 2px solid var(--af-pri);outline-offset: 2px;}
.af-btn-primary{color: #fff;background: var(--af-pri);}
.af-btn-primary:hover{background: var(--af-pri-h);}
.af-btn-outline{color: var(--af-fg);background: transparent;border: var(--af-b);}
.af-btn-outline:hover{background: rgba(0,0,0,0.04);}
.af-btn-accent{color: #fff;background: var(--af-acc);}
.af-btn-accent:hover{background: var(--af-acc-h);}
.af-seg{padding: 6px 14px;font-size: 0.8125rem;font-weight: 500;color: var(--af-muted);background: transparent;border: var(--af-b);border-radius: 6px;cursor: pointer;transition: all 0.2s;}
.af-seg:first-of-type{border-right-width: 0;border-top-right-radius: 0;border-bottom-right-radius: 0;}
.af-seg:last-of-type{border-top-left-radius: 0;border-bottom-left-radius: 0;}
.af-seg:hover{color: var(--af-fg);}
.af-seg-active{color: #fff;background: var(--af-pri);border-color: var(--af-pri);}
.af-panels{display: grid;grid-template-columns: 1fr;min-height: var(--af-h);}
.af-panel{display: flex;flex-direction: column;min-height: var(--af-h);}
.af-panel-formatted{display: none;}
.af-panel-formatted.af-panel-visible{display: flex;}
.af-panel-label{padding: 8px 14px;font-size: 0.75rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em;color: var(--af-muted);background: var(--af-bg);border-bottom: var(--af-b);}
.af-editor{flex: 1;min-height: 260px;width: 100%;}
.af-editor.ace_editor{font-size: 14px;border-radius: 0;}
@media (min-width:640px){.af-bar-seg{width: auto;order: 2;}.af-bar-right{order: 3;margin-left: 0;}}
@media (min-width:768px){.af-panels{grid-template-columns: 1fr 1fr;}.af-panel-formatted{display: flex;}.af-panel.af-panel-visible{display: flex;}.af-panel:first-child{border-right: var(--af-b);}.af-editor{min-height: 380px;}}
@media (min-width:1024px){.af-editor{min-height: 440px;}}