.arf-workspace{--arf-radius:14px;--arf-radius-sm:10px;--arf-border:1px solid var(--border,rgba(0,0,0,.08));--arf-bg:var(--surface,#fff);--arf-bg-soft:var(--surface-muted,#f8fafc);--arf-text:var(--text-main,#0f172a);--arf-text-muted:var(--text-muted,#64748b);--arf-primary:var(--primary,#0ea5e9);--arf-primary-hover:#0284c7;--arf-accent:#0891b2;--arf-accent-hover:#0e7490;--arf-editor-min:260px;}
.arf-workspace{background:var(--arf-bg);border:var(--arf-border);border-radius:var(--arf-radius);box-shadow:0 4px 24px rgba(0,0,0,.06);overflow:hidden;margin-bottom:2rem;}
.arf-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;background:var(--arf-bg-soft);border-bottom:var(--arf-border);}
.arf-format-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.arf-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.arf-format-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--arf-text-muted);}
.arf-pill{padding:6px 14px;font-size:0.8125rem;font-weight:500;color:var(--arf-text-muted);background:var(--arf-bg);border:var(--arf-border);border-radius:999px;cursor:pointer;transition:color .2s,background .2s,border-color .2s;}
.arf-pill:hover,.arf-pill:focus-visible{color:var(--arf-primary);border-color:var(--arf-primary);background:rgba(14,165,233,.06);outline:none;}
.arf-pill.is-active{color:#fff;background:var(--arf-primary);border-color:var(--arf-primary);}
.arf-samples{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;}
.arf-sample{padding:5px 12px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;color:var(--arf-accent);background:transparent;border:1px solid var(--arf-accent);border-radius:var(--arf-radius-sm);cursor:pointer;transition:color .2s,background .2s;}
.arf-sample:hover,.arf-sample:focus-visible{color:#fff;background:var(--arf-accent);outline:none;}
.arf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;}
.arf-btn{padding:8px 16px;font-size:0.875rem;font-weight:600;border:none;border-radius:var(--arf-radius-sm);cursor:pointer;transition:background .2s,color .2s,transform .05s;}
.arf-btn:focus-visible{outline:2px solid var(--arf-primary);outline-offset:2px;}
.arf-btn-primary{color:#fff;background:var(--arf-primary);}
.arf-btn-primary:hover{background:var(--arf-primary-hover);}
.arf-btn-secondary{color:var(--arf-text);background:var(--arf-bg);border:var(--arf-border);}
.arf-btn-secondary:hover{background:#f1f5f9;}
.arf-btn-ghost{color:var(--arf-text-muted);background:transparent;}
.arf-btn-ghost:hover{color:var(--arf-text);background:rgba(0,0,0,.04);}
.arf-panels{display:grid;grid-template-columns:1fr;gap:0;}
.arf-panel{display:flex;flex-direction:column;min-height:var(--arf-editor-min);border-bottom:var(--arf-border);}
.arf-panel:last-child{border-bottom:none;}
.arf-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px;padding:10px 16px;background:var(--arf-bg);border-bottom:var(--arf-border);}
.arf-panel-title{font-size:0.8125rem;font-weight:600;color:var(--arf-text);}
.arf-panel-hint{font-size:0.75rem;color:var(--arf-text-muted);}
.arf-editor-wrap{flex:1;min-height:var(--arf-editor-min);width:100%;}
.arf-editor-wrap.ace_editor{border-radius:0;font-size:14px;}
.arf-status{padding:10px 16px;font-size:0.8125rem;color:var(--arf-text-muted);background:var(--arf-bg-soft);border-top:var(--arf-border);}
.arf-status.has-error{color:#b91c1c;background:#fef2f2;}
.arf-status.has-success{color:var(--arf-accent);background:#ecfeff;}
@media (min-width:768px){.arf-panels{grid-template-columns:1fr 1fr;}.arf-panel{border-bottom:none;border-right:var(--arf-border);}.arf-panel-output{border-right:none;}.arf-editor-wrap{min-height:380px;}}
@media (min-width:1024px){.arf-editor-wrap{min-height:440px;}}