.avro-root{margin-bottom:1.5rem;-webkit-tap-highlight-color:transparent;}
.avro-panel{background:#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));}
.avro-grid{display:flex;flex-direction:column;}
.avro-left{display:flex;flex-direction:column;min-width:0;}
.avro-right{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--border,rgba(0,0,0,.08));}
.avro-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--surface-muted,rgba(0,0,0,.03));border-bottom:1px solid var(--border,rgba(0,0,0,.08));}
.avro-head-label{font-size:0.8125rem;font-weight:600;color:var(--text-muted,#6b7280);text-transform:uppercase;letter-spacing:0.04em;}
.avro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.avro-btn{font-size:0.8125rem;font-weight:500;padding:8px 14px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;display:inline-flex;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent;}
.avro-btn:active{transform:scale(0.98);}
.avro-btn-format{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.avro-btn-format:hover{background:var(--primary-dark,#1d4ed8);border-color:var(--primary-dark,#1d4ed8);box-shadow:0 4px 12px rgba(37,99,235,.25);}
.avro-btn-validate{background:transparent;color:var(--text-main,#111);border:1px solid var(--border,rgba(0,0,0,.15));}
.avro-btn-validate:hover{background:var(--surface-muted,rgba(0,0,0,.04));border-color:var(--primary,#2563eb);color:var(--primary,#2563eb);}
.avro-btn-clear{background:transparent;color:var(--text-muted,#6b7280);border:1px solid transparent;}
.avro-btn-clear:hover{background:var(--surface-muted,rgba(0,0,0,.06));color:#b91c1c;}
.avro-editor-wrap{min-height:220px;flex:1;}
.avro-editor{min-height:220px;width:100%;}
.avro-out-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--surface-muted,rgba(0,0,0,.03));border-bottom:1px solid var(--border,rgba(0,0,0,.08));}
.avro-out-label{font-size:0.8125rem;font-weight:600;color:var(--text-muted,#6b7280);text-transform:uppercase;letter-spacing:0.04em;}
.avro-copy{font-size:0.8125rem;font-weight:500;padding:6px 12px;border-radius:8px;border:1px solid var(--border,rgba(0,0,0,.12));background:#fff;color:var(--text-main,#111);cursor:pointer;transition:background .2s ease,border-color .2s ease;display:inline-flex;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent;}
.avro-copy:hover{background:var(--surface-muted,rgba(0,0,0,.04));border-color:var(--primary,#2563eb);color:var(--primary,#2563eb);}
.avro-copy.copied{background:#059669;border-color:#059669;color:#fff;}
.avro-output{min-height:160px;flex:1;padding:14px;font-size:0.875rem;line-height:1.6;font-family:ui-monospace,monospace;color:var(--text-main,#111);background:#fff;overflow-x:auto;overflow-y:auto;}
.avro-output-placeholder{color:var(--text-muted,#6b7280);}
.avro-output pre{margin:0;white-space:pre-wrap;word-wrap:break-word;}
.avro-output .avro-msg-error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px;margin:0;}
.avro-output .avro-msg-ok{color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:12px;margin:0;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}
*:focus-visible{outline:2px solid var(--primary,#2563eb);outline-offset:2px;}
@media (min-width:480px){.avro-head{padding:14px 16px;}.avro-editor-wrap{min-height:260px;}.avro-editor{min-height:260px;}.avro-out-bar{padding:12px 16px;}.avro-output{min-height:200px;padding:16px;}}
@media (min-width:768px){.avro-root{max-width:100%;padding:0;}.avro-panel{width:100%;}.avro-grid{flex-direction:row;min-height:420px;}.avro-left{flex:1;border-right:1px solid var(--border,rgba(0,0,0,.08));}.avro-right{flex:1;border-top:none;}.avro-editor-wrap{min-height:360px;}.avro-editor{min-height:360px;}.avro-output{min-height:320px;}}
@media (min-width:1200px){.avro-root{max-width:1400px;margin-left:auto;margin-right:auto;}.avro-grid{min-height:480px;}.avro-editor-wrap{min-height:420px;}.avro-editor{min-height:420px;}.avro-output{min-height:400px;}}