.app-container { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--zh-space-5); align-items:start; }
.control-panel { min-width:0; }
.options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--zh-space-5); }
.option-card { min-width:0; }
.option-card:last-child,.instructions { grid-column:1 / -1; }
label { display:block; font-weight:600; margin-bottom:var(--zh-space-2); }
.size-control,.color-input,.avatar-actions { display:flex; align-items:center; gap:var(--zh-space-2); flex-wrap:wrap; }
.size-input { max-width:8rem; }
.zh-select { width:100%; min-height:2.5rem; padding:.5rem; border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); background:var(--zh-bg-elevated); color:var(--zh-text); }
.color-value { width:8rem; max-width:100%; }
.color-preview { width:1.5rem; height:1.5rem; border:1px solid var(--zh-border); border-radius:var(--zh-radius-sm); }
input[type="color"] { width:2.5rem; height:2.5rem; padding:2px; border:1px solid var(--zh-border); background:var(--zh-bg-elevated); }
.avatar-upload-btn { border:1px dashed var(--zh-border); border-radius:var(--zh-radius-md); padding:var(--zh-space-4); text-align:center; cursor:pointer; }
.avatar-upload-btn:focus-visible { outline:2px solid var(--zh-color-primary); outline-offset:3px; }
.avatar-preview { display:none; width:60px; height:60px; margin:var(--zh-space-3) auto; overflow:hidden; border-radius:var(--zh-radius-md); }
.avatar-preview img,.avatar-overlay img { width:100%; height:100%; object-fit:cover; }
.avatar-actions { margin-top:var(--zh-space-3); }
.qrcode-container { display:flex; justify-content:center; align-items:center; min-height:18rem; overflow:auto; margin-bottom:var(--zh-space-5); }
#qrcode { position:relative; max-width:100%; }
#qrcode canvas,#qrcode > img { max-width:100%; height:auto; }
.avatar-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; }
.instructions li { margin-bottom:var(--zh-space-2); }
.ip-address { font-family:var(--zh-font-mono,monospace); font-size:clamp(1.5rem,4vw,2.5rem); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; margin:var(--zh-space-6) 0; }
#qr-status:not([hidden]) { padding:var(--zh-space-4); border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); color:var(--zh-text-danger); }
@media(max-width:48rem) { .app-container { grid-template-columns:minmax(0,1fr); } .options-grid { grid-template-columns:minmax(0,1fr); } .qrcode-container { min-height:14rem; } }