/* ---- brand switcher, demo only ---- */
.brandctl{position:relative;margin-left:auto}
.brandbtn{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.35rem .9rem;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--field);border-radius:var(--radius-xs);cursor:pointer}
.brandbtn:hover{border-color:var(--accent-text)}
.brandbtn::before{content:"";flex:none;width:15px;height:15px;border-radius:var(--radius-pill);background:var(--accent);box-shadow:var(--shadow-brand)}
.brandmenu{position:absolute;top:calc(100% + .65rem);right:0;z-index:22;width:min(24rem,90vw);max-height:min(72vh,34rem);overflow-y:auto;padding:1.15rem 1.25rem 1.35rem;background:var(--raised);border:1px solid var(--rule);border-radius:var(--radius-md);box-shadow:var(--shadow-card-hover)}
.brandmenu[hidden]{display:none}
.brandhead{margin:0 0 .55rem;font-family:var(--mono);font-size:1rem;letter-spacing:.02em;color:var(--muted)}
.brandhead + .brandhead,.brandseeds + .brandhead,.brandrow + .brandhead{margin-top:1.25rem}
#brandok{color:var(--accent-text);font-weight:600}
.brandseeds{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.brandseed{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .6rem;font-family:var(--sans);font-size:1rem;color:var(--text);background:transparent;border:1px solid var(--rule);border-radius:var(--radius-xs);cursor:pointer;text-align:left}
.brandseed:hover{border-color:var(--accent-text);background:var(--accent-soft)}
.bsw{flex:none;width:15px;height:15px;border-radius:var(--radius-pill);border:1px solid var(--field)}
.brandrow{display:flex;gap:.5rem;align-items:center}
#brandhex{flex:1;min-width:0;min-height:44px;padding:.4rem .7rem;font-family:var(--mono);font-size:1rem;color:var(--text);background:var(--bg);border:1px solid var(--field);border-radius:var(--radius-xs)}
#brandpick{flex:none;width:44px;height:44px;padding:2px;background:var(--bg);border:1px solid var(--field);border-radius:var(--radius-xs);cursor:pointer}
#brandreset{flex:none;min-height:44px;padding:.4rem .8rem;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--text);background:transparent;border:1px solid var(--field);border-radius:var(--radius-xs);cursor:pointer}
#brandreset:hover{border-color:var(--accent-text)}
.brandreport{list-style:none;margin:0;padding:0}
.brandreport li{display:flex;align-items:center;gap:.55rem;padding:.3rem 0;border-bottom:1px solid var(--rule)}
.btok{font-family:var(--mono);font-size:1rem;color:var(--text)}
.brat{margin-left:auto;font-family:var(--mono);font-size:1rem;color:var(--muted);white-space:nowrap}
.brandcollide{margin:.9rem 0 0;font-size:1rem;line-height:1.45;color:var(--accent-text)}
.brandcollide[hidden]{display:none}
@media (max-width:960px){.brandctl{order:1;margin-left:auto}.brandbtn{width:44px;padding:0;justify-content:center;font-size:0}}