/* Zappy 5.1 C1 - Brand Memory (mobile-first; wraps at 320px; visible focus; respects reduced motion) */
.zb{max-width:760px;margin:0 auto;min-width:0}
.zb-t{margin:0 0 6px;font-size:var(--fs-5,1.4rem)}
.zb-sub,.zb-x,.zb-hint{color:var(--muted);font-size:var(--fs-2,.9rem);margin:0 0 10px;overflow-wrap:anywhere}
.zb-hint{margin:2px 0 6px}
.zb-msg{min-height:1.2em;margin:0 0 10px;font-size:var(--fs-2,.9rem)}
.zb-err{color:var(--danger,#c0392b)}
.zb-status{padding:10px 12px;border-radius:10px;margin:0 0 12px;border:1px solid var(--line,rgba(128,128,128,.25));overflow-wrap:anywhere}
.zb-on{border-color:var(--ok,#2e8b57)}
.zb-empty{border:1px dashed var(--line,rgba(128,128,128,.35));border-radius:12px;padding:14px}
.zb-empty h3{margin:0 0 6px;font-size:var(--fs-3,1rem)}
.zb-empty ul{margin:0 0 12px;padding-left:20px}
.zb-list{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:10px}
.zb-card{border:1px solid var(--line,rgba(128,128,128,.25));border-radius:12px;padding:12px;min-width:0}
.zb-active{border-color:var(--accent,#6c5ce7)}
.zb-ctop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.zb-cname{display:flex;gap:8px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere;min-width:0}
.zb-badge{font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--accent-soft,rgba(108,92,231,.15))}
.zb-logo{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#fff}
.zb-logo-l{width:72px;height:72px;display:block;margin:0 0 8px}
.zb-sw{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.zb-chip{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.2)}
.zb-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.zb-btn{min-height:40px;padding:8px 14px;border-radius:10px;border:1px solid var(--line,rgba(128,128,128,.35));background:transparent;color:inherit;cursor:pointer;max-width:100%;white-space:normal;font:inherit}
.zb-p{background:var(--accent,#6c5ce7);border-color:var(--accent,#6c5ce7);color:#fff}
.zb-danger{color:var(--danger,#c0392b)}
.zb-btn:disabled{opacity:.6;cursor:default}
.zb-form{display:grid;gap:12px}
.zb-form h3{margin:0;font-size:var(--fs-4,1.15rem)}
.zb-f label,.zb-fs legend{font-weight:600;display:block}
.zb-f input[type=text],.zb-f textarea{width:100%;box-sizing:border-box;min-height:40px;padding:8px 10px;border-radius:8px;border:1px solid var(--line,rgba(128,128,128,.35));background:var(--bg2,transparent);color:inherit;font:inherit}
.zb-fs{border:1px solid var(--line,rgba(128,128,128,.25));border-radius:10px;padding:10px 12px;margin:0;min-width:0}
.zb-colours{display:flex;flex-wrap:wrap;gap:10px}
.zb-cw{display:flex;align-items:center;gap:4px}
.zb-cw input[type=color]{width:44px;height:40px;border:0;padding:0;background:none}
.zb-cw input[type=checkbox]{width:20px;height:20px}
.zb-ind{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-2,.9rem);margin:6px 0;overflow-wrap:anywhere}
.zb-ind input{width:18px;height:18px}
.zb button:focus-visible,.zb input:focus-visible,.zb textarea:focus-visible,.zb-ind input:focus-visible,.zb-t:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.zb *{transition:none!important}}

/* 5.1 C1.1: nothing in the panel may exceed its box at 375px */
#brandPanel,#brandPanel *{box-sizing:border-box;max-width:100%}
#brandPanel{overflow-wrap:anywhere}
.zb-cw{min-width:0}